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

Your understanding of the sequence of events is correct. The only thing missing is the precise timing of the effect callbacks and cleanup.

When the component re-renders, any useEffects will have their dependency arrays analyzed for changes. If there has been a change, then that effect callback will run. These callbacks are guaranteed to run in the order that they're declared in the component. For example, below, a will always be logged just before b.

const App = () => {
    const [num, setNum] = React.useState(0);
    React.useEffect(() => {
      setInterval(() => {
        setNum(num => num + 1);
      }, 1000);
    }, []);
    React.useEffect(() => {
      console.log('a', num);
    }, [num]);
    React.useEffect(() => {
      console.log('b', num);
    }, [num]);
    return num;
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

These effect callbacks will run shortly after the browser re-paints.

Now add the effect cleanup callback into the mix. These will always run synchronously just before the effect callback for a render runs. For example, let's say the component starts at Render A, and in Render A, an effect hook has returned a cleanup callback. Then, some state changes, and a transition to Render B occurs, and there exists a useEffect with a dependency array that includes the state change. What will happen is:

• The functional component will be called with the new props/state, for Render B
• The component returns the new markup at the end of the function
• The browser repaints the screen if necessary
• The cleanup function from render A will run
• The effect callback from render B will run

You can see the source code for those last two actions here:

commitHookEffectListUnmount(Passive$1 | HasEffect, finishedWork);
commitHookEffectListMount(Passive$1 | HasEffect, finishedWork);

That first call invokes all cleanup callbacks from a prior render. That second call invokes all effect callbacks for the current render. Current render effect callbacks run synchronously after the execution of prior render cleanup callbacks.