Bug: React 18 + useEffect cleanup runs immediately after render

[tianhuil]

React version: 19

Steps To Reproduce

Here is a bare-bones react app with one useEffect: https://github.com/tianhuil/use-effect-demo/

In this one, we log the cleanup side effect to console in v18, which you can verify by running pnpm dev and inspecting the console.

In the next commit we do the same thing in v17, which does not print the same log statement in the console.

Impact

This is pretty important. The cleanup function is used for unsubscribing from listeners and DB subscriptions. This behavior kills those listeners and subscriptions before the first fetch completes!

The current behavior

I expect v18 useEffect cleanup runs immediately (not at unmount)

The expected behavior

I expect v18 to behave as v17.

[vkurchatkin]

In React 18 effects runs effects twice in strict mode (i.e. effect -> cleanup -> effect), so this is totally expected

[eps1lon]

As was mentioned, this is expected behavior that got introduced in React 18: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

[tianhuil]

Thanks @vkurchatkin, @eps1lon

[gaearon]

We wrote a new page documenting this in detail on the Beta website.

https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development

Hope this is helpful. Sorry some links from there are 404 because other pages are still being written.