CODEWITHSUNDEEP
reactjsuse-effect
julBayonna
julBayonna

Reputation: 449

useEffect re rendering all the time


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 !!

Upvotes: 1

Views: 67

Answers (1)

Viet
Viet

Reputation: 12807

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);
  });

Upvotes: 2

Related Questions