cleanupCallback != componentDidUnmount

The first is around the optional cleanup function you can return from the callback passed into useEffect . From the official react docs:

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time.

I think as soon I read that it’s run when the component unmounts, my brain ignored the rest of that statement. I’ve been so locked into the lifecycle mindset, and that classes == hooks, I didn’t acknowledge useEffect 's novel feature of running it’s cleanup anytime the useEffect callback is run again. Anytime that the useEffect callback is run, before it can be run again, the cleanup callback will be run. It has some interesting implications, though to be honest at the moment no practical applications of this behavior spring to mind 😅.

An effect callback will run after every render unless we specify an array of deps. If we specify deps, it will run only when that dep changes between renders. And if that happens, the cleanup callback will have to run too. It doesn’t only happen when the component unmounts. But in fact, we should probably not really think of our component as “unmounting” with a hooks component, but rather the end of just another, albeit final, render.

You can see this irl by playing with this example. Check the console and you’ll see with every press of the button, the log inside of the callback is printed, as well as the log inside of the cleanup function.