Esta página de mi aplicación de reacción contiene la función createBubbles, que funciona bien. El problema es que cuando voy a otra página después de visitar esta, toda la aplicación se congela.
Estos son los errores que muestra la consola, lo intenté con window.onloand pero no funciona.
function createBubbles(){ const section = document.querySelector('section'); const createElement = document.createElement('span'); var size = Math.random() * 60; createElement.style.width = size + 'px'; createElement.style.height = size + 'px'; createElement.style.left = Math.random() * innerWidth + 'px'; window.onload=section.appendChild(createElement); setTimeout(() => { createElement.remove(); },4000) } setInterval(createBubbles,50);necesita borrar su intervalo en el desmontaje del componente.
const interval = setInterval(createBubbles,50); useEffect(() => { return () => { clearInterval(interval) } }, [])Ese error ocurre porque cuando desmonta ese componente navegando a otra ruta de componente, su cola de bucle de eventos aún está llena de funciones para ejecutar, ya que setInterval aún está activo, pero el nodo DOM que está seleccionando para agregar las burbujas ya no existe. .
Al usar setTimeout, detectores de eventos, setInterval, etc... en React, debe colocar la ejecución dentro de un useEffect y debe asegurarse de limpiar el intervalo, el detector de eventos, el tiempo de espera, etc... en el desmontaje, lo logra al regresar de useEffect una función que realiza el borrado:
Para usar los nodos DOM directamente, no use los selectores JS de vainilla, pero use una referencia.
export default function App() { const sectionRef = useRef(); useEffect(() => { function createBubbles() { const section = sectionRef.current; const createElement = document.createElement('span'); const size = getRandom(60); const innerWidth = window.innerWidth; const innerHeight = window.innerHeight; createElement.style.backgroundColor = `rgba(${getRandom(255)},${getRandom(255)},${getRandom(255)})`; createElement.style.width = size + 'px'; createElement.style.height = size + 'px'; createElement.style.left = Math.random() * innerWidth + 'px'; createElement.style.top = Math.random() * innerHeight + 'px'; if (section) { section.appendChild(createElement); setTimeout(() => { createElement.remove(); }, 4000); } } const interval = setInterval(createBubbles, 50); return () => clearInterval(interval); }, []); return <section ref={sectionRef}></section>; } function getRandom(max) { return Math.random() * max; }Un ejemplo de trabajo https://stackblitz.com/edit/react-959lni?file=src%2FApp.js