useEffect re rendering all the time

Question

i have already posted questions here regarding my humble attempt at creating a space invader type of game !
this time i am having troubles with useEffect rerendering everytime i shoot a laser, leading to launching a setintervall again everytime i hit shoot, and then my lasers are going faster and faster !! is the solution placing my setInterval elsewhere, or working on the useEffect so it does not render when i shoot a laser ?? here is my updated sandbox :

https://codesandbox.io/s/mfcqd?file=/src/MainGameContainer.jsx

i am guessing the probleme lies in './src/gameElements/lasers.jsx' and it's the useEffect at the beggining of the function that keeps on rendering everytime i shoot.

thank you if anaone can help !!

Viet · Accepted Answer · 2021-02-11 11:19:24Z

You have to clear the interval in your useEffect cleanup, otherwise when component re-rerenders, the old interval is still there:

 useEffect(() => { let timing = setInterval(moveLasers, 30); return () => clearInterval(timing); });

oh yes i tried that but probably did it the wrong way, thsk so much !!

Collectives™ on Stack Overflow

useEffect re rendering all the time

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related