pointerTap listener fires 7 times on PIXI.Sprite clicked once inside a React component

Question

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.

user_2886688 · Answer

Try passing an empty array to the useEffect function:

useEffect(() => {
  chestSprite.on('pointertap', callback);
}, []);