Doubt regarding the lesson : How to deal with side effects

[coding-cosmos]

In "the clean-up function" section of Using effects save the day in the above article it is written that :

"..... When the component is unmounted, setInterval is not stopped, it keeps incrementing...."

I think it should be

".....When the component is updated, setInterval is not stopped, it keeps incrementing......"

As the component is not unmounted it is being updated when the Clock component re-renders with a different counter state.

Is it so or I'm missing something?

A screenshot of the concerned part of the lesson is attached for reference

[MaoShizhong]

The lesson verbiage is correct. The example has the interval set in a useEffect with an empty dependency array, meaning the effect callback runs once on component mount, then never again. The cleanup function runs before every re-run of the effect, and once upon component unmount.

Since the empty dependency array means the effect will never run again after it runs on mount, then the only time the cleanup function runs will be when you unmount the component.

If the dependency array contained variables, then the effect would rerun every time once of those variables changes value, in which case the cleanup function will run before each of those effect reruns.

But otherwise, effects do not rerun just because a component updates in some way. It's specifically only if anything in the dependency array changes. And since the example has nothing, it will never re-run.

You'll note in the 3rd paragraph, it says this:

You can return a function from the callback in the useEffect hook, which will be executed each time before the next effect is run, and one final time when the component is unmounted. In this case, let us clean up the interval with a cleanup function.

Hope that clears things up!

[coding-cosmos]

@MaoShizhong Thanks for clearing the confusion...

I was confused about how the component was being unmounted as I was ignoring the empty dependency array and the effect of "React StrictMode" as mentioned at the start of the paragraph which caused an extra re-render and hence unmounting.

Thank you very much for clearing up the confusion😊

[MaoShizhong]

No problem at all! Glad I could help :D