Why does useEffect Run Twice in React v18.0?

Is this a bug in with effects in React 18?

Photo by Christian Erfurt on Unsplash

After upgrading to React v18, I found a problem with useEffect when I was developing and debugging locally, it wasn’t like I knew it before.

As in the following example:

Guess what is printed in the console?

Yes, you read that right, it prints Call! twice. Specifically, this component is mounted, then unmounted, and then remounted.

This also means that when you fetch data in useEffect, it will be sent twice!

Why is this happening? When I first encountered this problem, I thought it was a bug in my program until I went to the official documentation to see:

It turns out that this is a “new feature” of useEffect. . .

In development mode, if you use the default <React.StrictMode />, then useEffect will behave as above.

The reason given in the documentation is that this approach can make existing problems in our code appear earlier.

For example, the chat room example is given in the documentation:

Yes, it is similar to the example I introduced at the beginning. That said, React helps us simulate what happens when a user leaves a chat room and then comes back to it. This allows us to check the program correctly and avoid creating two connections by mistake here.

But what if you want to get data in useEffect? Dan posted this in GitHub’s Issues:

Image from GitHub Issues

Well, if you’ve been a React Query or similar library user before, this might be fine. But if not, then it may take time to learn.

So what was the original intention of adding such a behavior?

The answer is to ensure reusable state. It allows React to add and remove sections of the UI while preserving state. For example, when switching between multiple tabs, keep the state of the previous tab. This can improve the user experience or reduce unnecessary API calls.

Does it feel similar to KeepAlive in Vue? :)

Can it be turned off?

The answer is yes.

Just comment out <React.StrictMode /> at the entry point.

But it also means turning off many of React’s useful strict checks, which isn’t ideal.

Conclusion

Although this feature brings us a strict reminder in development mode, for most people, it increases the learning cost and mental burden.

So what do you think?

References

[1] https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/synchronizing-with-effects

[2] https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

[3] https://github.com/facebook/react/issues/24502