Bug: useEffect runs twice on component mount (StrictMode, NODE_ENV=development)

[cytrowski]

React version: 18.0.x, 18.1.x, 18.2.x

Steps To Reproduce

1. Visit provided sandbox
2. Open console and observe logs displayed twice.
3. Click the button and observe the rendering log happens twice, the effect log happens once.

Link to code example: https://codesandbox.io/s/react-18-use-effect-bug-iqn1fx

The current behavior

The useEffect callback runs twice for initial render, probably because the component renders twice. After state change the component renders twice but the effect runs once.

The expected behavior

I should not see different number of renders in dev and prod modes.

Extras

The code to reproduce:

import { useEffect, useReducer } from "react";
import "./styles.css";

export default function App() {
  const [enabled, toggle] = useReducer((x) => !x, false);

  useEffect(() => {
    console.log(
      "You will see this log twice for dev mode, once after state change - double effect call"
    );
  }, [enabled]);

  console.log("You will see this log twice for dev mode - double rendering");

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => toggle()}>
        Toggle me: {enabled ? "on" : "off"}
      </button>
    </div>
  );
}

[eps1lon]

Effects firing twice in <React.StrictMode /> was added in React 18.

For more information, check out StrictMode: Ensuring reusable state

[cytrowski]

Thank you @eps1lon for clarification. However this is not intuitive and I'd expect this being mentioned/referenced in the useEffect docs here: https://reactjs.org/docs/hooks-effect.html

I can imagine people being surprised by this behaviour. The perfect solution would be to have a warning in the console.

[cytrowski]

Also: I see no mention of this breaking change in the changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022

[sean-clayton]

@cytrowski https://github.com/facebook/react/blob/main/CHANGELOG.md#react-1 <- In the "stricter strict mode" bullet

[cytrowski]

@cytrowski https://github.com/facebook/react/blob/main/CHANGELOG.md#react-1 <- In the "stricter strict mode" bullet

@sean-clayton this does not explain why I see the rendering log twice after state change (not only initial render). However I believe there is already an issue for that.

Anyway I still believe this should be something announced in the console warnings (similar way you do with encouraging React Dev Tools installation)

[gaearon]

It is described in the upgrade post. We strongly recommend anyone upgrading to read the full upgrade post.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode

I agree it's confusing this isn't documented explicitly in the conceptual introduction to effects. We'll fix this in the new docs. We've published some docs on this now:

• How to handle data fetching happening twice?
• Is fetching data with effects recommended?

I disagree about the console log. The DevTools log is different because it disappears by installing DevTools. So most users (who we presume install DevTools) won't get it.

[cytrowski]

I agree it's confusing this isn't documented explicitly in the conceptual introduction to effects. We'll fix this in the new docs.

Thank you for that @gaearon :)

Any hints where to put fetch calls so that they are not triggered twice in dev mode useEffect callback?

[gaearon]

The "best" advice depends on how your app is built:

• If you use a framework (e.g. Next.js / Remix / etc), use that framework's built-in data fetching mechanisms. They're usually much better than ad-hoc effects because they handle caching, server rendering, and avoid waterfalls.
• If you use a client-side cache (e.g. React Query / useSWR / etc), use that cache's data fetching mechanisms.
• If you don't want to consider either a framework or a client-side cache, please keep fetching in effects. But there are numerous reasons why you might want to consider the solutions above! (For example, if you don't have any caching solution, clicking Back button in your app would always show a spinner instead of cached data—an easy way to detect apps that call fetch + setState directly in their effects.)

This advice is not new and is not specific to React 18, but maybe we haven't shared it very clearly before. I've written a longer and more nuanced version in this Reddit reply. I hope this clarifies the intention behind sharing this advice a bit better.

If you fetch from effects, you can do something like this:

useEffect(() => {
  let ignore = false;
  fetchStuff().then(res => {
    if (!ignore) setResult(res)
  })
  return () => { ignore = true }
}, [])

This will not prevent the double-fetch, but it will ignore the result of the first one. So it's like it never happened. There is no harm from the extra fetch call in development. You could also use a fetching helper with cancellation, and cancel the fetch instead of ignoring its result. Keep in mind that in production you'll only get one fetch.

Read more:

• How to handle data fetching happening twice?
• Is fetching data with effects recommended?

[cytrowski]

For posterity:

Just out of curiosity I went and check how react-query solves this problem and it's impressive how many things they handle out of the box.

To prove the problem doesn't occur I created this sandbox: https://codesandbox.io/s/react-query-vs-react-18-strict-mode-xpzkr1

Once again thanks for explaining the problem @gaearon

Case closed ;)

[CharlyJazz]

So basically, in React 18 is a better idea install a third party library to do API fetching.

[TkDodo]

Hi, react-query maintainer here. 👋

glad to see people are happy with react-query. 🙌
just for completeness, I'd like to point out that even in react-query, the strict effects fires the fetch "twice". We just deduplicate multiple requests that are going on at the same time, so it literally doesn't matter if one component mounts, then unmounts, then mounts again, or if 5 consumers call useQuery at the same time.

strict-effects have also shown us two edge-case bugs already, so I'm really glad that exists. 🙏

You could also use a fetching helper with cancellation, and cancel the fetch instead of ignoring its result.

react-query supports AbortSignals, so if that is used, what will happen is that the first fetch is aborted and the second fetch will supersede the first one. This might also throw people off because there are two requests in the network tab, but it's how aborting queries is designed to work :)

[cytrowski]

@TkDodo I've seen that it's not just some clever hack around useEffect - instead it's nicely deduped :) Thanks for making that clear ;)