En una aplicación React, uso la biblioteca PIXI para renderizar la animación, @inlet/react-pixi crea el escenario, gsap para la interpolación.
En la primera ejecución, la aplicación crea un sprite en el que se puede hacer clic, luego agrega un detector de eventos "pointerTap" con una devolución de llamada.
useEffect(() => { chestSprite.on('pointertap', callback); })Una vez que se hace clic en ChestSprite, la devolución de llamada se dispara 7 veces en lugar de 1. ¿Cómo hacer que se dispare solo una vez?
Creo que la razón es que React vuelve a renderizar varias veces en init y agrega otro eventListener en cada renderizado.
Intente pasar una matriz vacía a la función useEffect :
useEffect(() => { chestSprite.on('pointertap', callback); }, []);Documentación relacionada: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects