javascript - When does the useEffect's callback's return statement execute?

Question

I'd like to clarify my understanding of what's happening here. Any detail to improve my current understanding'd be appreciated.

function Timer() {

    let [time, setTime] = useState(5);

    useEffect(() => {
        let timer = setInterval(() => {
          setTime(time - 1);
        }, 1000)
        return () => clearInterval(timer);
    }, );

    return <div>{time}</div>
}

export default Timer

https://codesandbox.io/s/cranky-chaplygin-g1r0p

1. time is being initialised to 5.
2. useEffect is read. Its callback must be made ready to fire later.
3. The div is rendered.
4. useEffect's callback is executed. setInterval's callback gets ready to fire. Surely useEffect's return statement doesn't fire here, because if it did it would cancel the timer (and the timer does work).
5. After, roughly, 1 second, setInterval's callback fires changing the state of time (to 4).
6. Now that a piece of state has changed, the function is re-executed. time, a new variable, is initialised to the new time state.
7. A new useEffect is read, it's callback made ready to fire later. (This happens because there is no 2nd argument of useEffect()).
8. The component function's return statement is executed. This effectively re-renders the div.
9. At some point, the previous useEffect's return statement executes (which disables the timer in that previous useEffect). I'm not sure when this occurs.
10. The 'new' useEffect's callback is executed.

Answer 1

Does a functional component 'dismount' after a change in its state and does this result in previous useEffect callback return statements executing?

No, component dismounts only once at end of its life time, React allows to execute a callback with useEffect hook by providing an empty dep array with a return statement:

useEffect(() => {
  return () => {
    console.log("unmounts");
  };
}, []);

When component dismounts?

When its parent stops rendering it. See conditional rendering.

---

Could you help me understand, in general or in the example in my question, when the return statement of useEffect executes?

Depends on the dep array:

• if it's empty [], on unmount.
• if it has dependencies [value1,value2], on dependencies change (shallow comparison).
• if it has no dependencies (no 2nd argument for useEffect) it runs on every render.

See follow up question useEffect in depth / use of useEffect?