3 ms·

I thought I’d share this in the hope that other developers see it and don’t lose a bunch of time wondering why e.g. code in a useEffect(…, []) block is being ca

I thought I’d share this in the hope that other developers see it and don’t lose a bunch of time wondering why e.g. code in a useEffect(…, []) block is being called twice. I created a new Next.js project and was very confused to see my console.logs appearing twice. It might be nice for React to log a warning that it is going to do this as it’s quite confusing if you aren’t aware of it!

rektide 5y ago
This seems like a super aggressive move, giving up lots of performance & complexity for some pretty com ppl lex consistency checking. Is tbis in production build too?
- technion 5y ago
  No, this is document as only occurring in development mode.
  - tomduncalf 5y ago
    Yea sadly there weren’t enough characters in the title field for me to put “strict dev mode” so that nuance was lost Edit: dang updated the post title to include this
- tomstuart 5y ago
  Aside from being development-only, note that you also need to wrap a component in `<React.StrictMode>…</React.StrictMode>` to opt it into this.
  - tomduncalf 5y ago
    Yeah, good point - I thought it could be that Next.js changed their default behaviour to use strict mode when they upgraded to React 18 but another comment says React 17 silenced the duplicate logs(!) so maybe the change is older than that.
beart 5y ago
this sounds similar to angular which performs multiple passes in dev mode and warns if values have not settled
Mogzol 5y ago
> code in a useEffect(…, []) block is being called twice Shouldn't that be one of the few cases where the code isn't being called twice? useEffect is meant for side-effects, so it isn't included in the list of functions that React will call twice.
- danabramov 5y ago
  This new check is in preparation for an upcoming feature that lets you preserve state between unmounts. For example, when switching a between routes or changing a top-level tab. The check simulates unmounting and immediately remounting (with state/DOM preserved), which is why effects run twice. It simulates what happens when you switch away to another tab and then back, like a stress-test for this scenario. Since in most cases, switching to another tab and then immediately switching back shouldn’t be observable behavior. You might fire an extra impression log in development, but from the user perspective the behavior should be the same. And if it’s not, you’ll see the same result as if the user actually switched tabs there and back. So it doesn’t just “run the code twice” but it simulates what happens when a tree remounts with existing state. Most components are already resilient to this, but the feature is hard to adopt if this resiliency isn’t being tested. This check helps find the remaining cases where remounting wouldn’t be safe, early. Hope this clarifies it a bit! https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.h...
  - joeframbach 5y ago
    We already have Providers for that.

rektide 5y ago

This seems like a super aggressive move, giving up lots of performance & complexity for some pretty com ppl lex consistency checking. Is tbis in production build too?

technion 5y ago
No, this is document as only occurring in development mode.
- tomduncalf 5y ago
  Yea sadly there weren’t enough characters in the title field for me to put “strict dev mode” so that nuance was lost Edit: dang updated the post title to include this
tomstuart 5y ago
Aside from being development-only, note that you also need to wrap a component in `<React.StrictMode>…</React.StrictMode>` to opt it into this.
- tomduncalf 5y ago
  Yeah, good point - I thought it could be that Next.js changed their default behaviour to use strict mode when they upgraded to React 18 but another comment says React 17 silenced the duplicate logs(!) so maybe the change is older than that.

beart 5y ago

this sounds similar to angular which performs multiple passes in dev mode and warns if values have not settled

Mogzol 5y ago

> code in a useEffect(…, []) block is being called twice Shouldn't that be one of the few cases where the code isn't being called twice? useEffect is meant for side-effects, so it isn't included in the list of functions that React will call twice.

danabramov 5y ago
This new check is in preparation for an upcoming feature that lets you preserve state between unmounts. For example, when switching a between routes or changing a top-level tab. The check simulates unmounting and immediately remounting (with state/DOM preserved), which is why effects run twice. It simulates what happens when you switch away to another tab and then back, like a stress-test for this scenario. Since in most cases, switching to another tab and then immediately switching back shouldn’t be observable behavior. You might fire an extra impression log in development, but from the user perspective the behavior should be the same. And if it’s not, you’ll see the same result as if the user actually switched tabs there and back. So it doesn’t just “run the code twice” but it simulates what happens when a tree remounts with existing state. Most components are already resilient to this, but the feature is hard to adopt if this resiliency isn’t being tested. This check helps find the remaining cases where remounting wouldn’t be safe, early. Hope this clarifies it a bit! https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.h...
- joeframbach 5y ago
  We already have Providers for that.