This page of my react app contains the createBubbles function, which works ok. The problem is that when im going to another page after visiting this one, the whlole app freeze.
This is the errors that console shows, i tried with window.onloand but doesnt work.
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);
you need to clear your interval on component unmount.
const interval = setInterval(createBubbles,50);
useEffect(() => {
return () => {
clearInterval(interval)
}
}, [])
That error happens since when you unmount that component by navigating to another Component route, your Event Loop queue is still full of functions to be executed since the setInterval is still active, but the DOM node that you are selecting to append the bubbles no longer exists.
When using setTimeout, event listeners, setInterval, etc... in React, you need to place the execution inside a useEffect and you must make sure to clean the interval, event listener, timeout, etc... on unmount, you achieve that by returning from useEffect a function that performs the clear:
To use DOM nodes directly, don't use vanilla JS selectors but use a ref.
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;
}
A working example https://stackblitz.com/edit/react-959lni?file=src%2FApp.js