In a React application I use PIXI library for rendering animation, stage is created by @inlet/react-pixi, gsap for tweening.
On the first run the app creates a clickable sprite, then adds an eventlistener "pointerTap" with a callback.
useEffect(() => {
chestSprite.on('pointertap', callback);
})
Once chestSprite is clicked, callback fires 7 times instead of 1. How to make it fires only once?
I think the reason is that React re-renders several times on init and adds another eventListener on each render.
Try passing an empty array to the useEffect function:
useEffect(() => {
chestSprite.on('pointertap', callback);
}, []);
Related documentation: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects