React setInterval function 在重新渲染后继续在后台运行

Question

I am using setInterval inside useEffect with an empty dependency array inside one of my react component. There is true/false useState which controls the display of that component. When the state is false, the component is hidden and when it's true the component is shown.

Something like this:

const [state, setState] = useState(false)

// in jsx render section

return (
   <div>
      {state? <component/> : '' }
   </div>
)

When the component loads for the first time the setInterval runs only one time which is what it supposes to do.

If the state goes to false then back to true, the component is removed from the UI then displayed back again, but what happens here is now I have two setInterval functions running in the background, the first one doesn't shutdown.

The number of the setInterval functions keeps increasing with each time that component rerender.

I don't understand how React works in this situation.

I need to know how it works and how to fix it.

Answer 1

This is the structure of React useEffect.React performs the cleanup when the component unmounts.

useEffect(() => {
    //effect
    return () => {
        //cleanup runs on unmount
    }
}, [])

The cleanup function should have clearInterval() which will basically removes setInterval or stops it when component unmounts. See the practical code below:

let intervalid;
useEffect(
    () => {
     intervalid = setInterval(() => {console.log("Iterate");}, 1000));

      return function cleanup() {
        console.log("cleaning up");
        clearInterval(intervalid);
      };
    },
    []
  );

This above code is just for understanding approach. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. # FROM REACT DOCS Reference