When is the cleanup function triggered when using useEffect hook with dependencies?

Question

I'm using a useEffect to show a UI Loading... but only after 250ms. It works ... but I really don't understand why and specially how and when useEffect invokes the returned function (that clears the timeout).

Well ... I'm not sure that's work perfectly. Sometimes the "Loading ..." message should appear but it's not.

 const [loadingAfterShortTime, setLoadingAfterShortTime] = useState(false);

 useEffect(() => {
  setLoadingAfterShortTime(bool => false);
  if (myDepandanceToTrigTheLoadingWord === true) {
    const id = setTimeout(() => {
      setLoadingAfterShortTime(bool => true);
    }, 250);
    return () => {
      clearTimeout(id);
    };
  }
}, [myDepandanceToTrigTheLoadingWord]);

Answer 1

The explanation provided by @Powell Ye is good however there a bit of erroneous information specifically when speaking about re-renders (e.g. when props change)

consider some simple component with the following

    useEffect( () => {
        console.log('Effect is applied')
        //some logic
        return () => {
            console.log('cleaning up')
            //cleanup logic
        }
    })
    return (<>
        {console.log('rendering...')}
     </>)

say the props passed in changes you might think it goes as such

1. 'cleaning up'
2. new props
3. 'rendering...'
4. 'Effect is applied'

However, the following actually occurs

1. new props
2. 'rendering...'
3. 'cleaning up'
4. 'Effect is applied'

That is, the clean up function runs AFTER the new render/painting but BEFORE the 'new' effects are applied, the docs can be a bit ambigious about this

the previous effect is cleaned up before executing the next effect

This is done for performance reasons => so that rendering is not delayed ( it can be frustrating at times for me too )

Answer 2

Here's an outline of the timings involved:

• useEffect is called on the initial render and whenever any of the values it depends on change. In general, it fires after the rendering is completed. If you think of it in terms of a class-based component, equivalent would be componentDidMount method.
• The function returned from within useEffect is invoked before the component is removed from the UI or is about to re-render (to avoid memory leaks). Previous effect is always cleaned up before performing the next effect. It's guaranteed to run before any new renders. Equivalent would be componentWillUnmount.

Example

Let's assume that there is a useEffect with few dependencies made of props (which are passed to our component) + a cleanup function. On the first render, the following would happen:

• Once the component is mounted, code inside effect's body will run;
• Cleanup function stays put, ready to run before the component re-renders / is removed from the screen.

Now let's imagine something triggers a re-render. Since it's listed as something useEffect depends on, the effect will be re-executed as following:

• Cleanup function executes after rendering is completed;
• Right after that, code inside effect's body will run;
• New cleanup function is created, again, ready to execute after the component re-renders / or before it's removed from the screen.