Entonces, mi problema aquí es bastante simple, pero no es necesario que comprenda los otros códigos, solo las partes useEffect() ...

El texto del cursor de mi mouse personalizado se duplica cuando traté de desplazar el text

Aquí están las líneas de códigos.

 const cursorIntro = document.querySelector(".cursor"); const options = document.querySelector(".introduction .nav-options"); options.addEventListener("mousemove", function s(e) { var rect = options.getBoundingClientRect(); var x = e.clientX - rect.left; //x position within the element. var y = e.clientY - rect.top; cursorIntro.style.left = x + "px"; cursorIntro.style.top = y + "px"; }); function OnSelect() { const optionsSelection = document.querySelectorAll(".options"); optionsSelection.forEach((elem, i) => { // console.log(elem.children[1].children[0].children[0]) elem.children[1].children[0].children[0].addEventListener( "mouseleave", () => { cursorIntro.removeChild(cursorIntro.lastChild); // cursorIntro.innerHTML = "" } ); elem.children[1].children[0].children[0].addEventListener( "mouseenter", () => { // elem.children[1].children[0].children[0].classList.add('') const createElement = document.createElement("h4"); createElement.innerText = elem.children[1].children[0].children[0].dataset.name; cursorIntro.appendChild(createElement); } ); }); } OnSelect();

Como puede ver, tengo un cursor de mouse personalizado y porque ahí es donde quiero agregar el texto cuando pasa el cursor sobre los elementos de text .

Esto está dentro de useEffect() cuando lo llamo... pero uno que no estaba seguro es que solo devuelvo la llamada una vez al addEventListener por cada uno.

La razón por la que usé createElement porque si usé innerHTML sin usar createElement , no puedo agregar otros elementos porque mi plan aquí es agregar algo más en mousecursor

ESTE ES EL CODEPEN