如何修复 React useEffect() 的无限循环？

Question

Why is my page rendered so many times? How do I fix this? I need to monitor my dependencies

 const [movie, setMovie] = useState(value);

 useEffect(() => { 
    if (canLoad) { 
      const filteredMovie = value.filter( val => val.id !== id);
      setMovie(filteredMovie);
      console.log("movie after filtering", movie); // NOT FILTERED 
    } 
  }, [canLoad, movie]);

after this code i got infinitive loop... when i remove selected from dependencies this is work okay but i need to check and monitoring selected because i need to change state.

react not updating immediately my state because i need to set to depedencies.

How to fix this?

Answer 1

movie changes inside this useEffect where has movie as dependency. when changing movie inside useEffect, it gonna trigger again because movie its one of its dependencies

useEffect(() => { 
    if (canLoad) { 
      const filteredMovie = value.filter( val => val.id !== id);
      setMovie(filteredMovie);
      console.log("movie after filtering", movie); // NOT FILTERED 
    } 
  }, [canLoad]); // remove movie from here

Answer 2

useEffect(() => {do something if canLoad changes}, [canLoad]}

useEffect(() => {do something if movie changes}, [movie])

you can chain multiple useEffects.

Answer 3

Let's break down what's happening. Javascript runs in an event loop, so calls to hooks like setMovie are not synchronous, their updates will become available in the next iteration of the loop. This means that when you call setMovie(filteredMovie) , movie does not immediately change - it will become available in the next iteration of the event loop, but that won't happen until the effect finishes executing. That's why printing movie in the console stays the same at this point. However, movie does change. So adding it to the dependency array at the end means that every time movie is changed, the effect will re-execute.