React: Calling setState during component rendering causes incorrect previous state value in next state update

[hlousekv]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Counter value is 1.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/7jzwjm090j

What is the expected behavior?
Counter value should be 2.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Firefox/Chrome
16.8.1

[gaearon]

This is a bug.

[aaronjensen]

I get why this can be surprising, though I was under the impression that one should not call setState in a render call (because it's a side effect). Am I missing something?

[gaearon]

https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops

[therealdmitry]

I have exactly this case. Implemented everything as described here. Spent a couple of hours double-checking everything before stumbling upon this issue. Hope it will be fixed soon because this is a common case in our app.

[gaearon]

We always want to fix bugs soon. :-) There’s no need to add extra pressure — we do feel guilty around bugs in the wild and try to fix them as soon as possible.

We expect to cut a fix some time next week.

[therealdmitry]

There’s no need to add extra pressure

Sorry, i didn't wanted it to sound like that (i'm still sometimes struggle with speaking/writing english). React team done an amazing work on hooks, thanks all of you for that.

I think that this would be preferebale solution for avoiding this bug until it will be fixed.

[michalkvasnicak]

Is this the same problem as described in this issue? https://codesandbox.io/s/50k546knwk

When you click on button, the count will reset to 1 because it will use initial state instead of updated one.

Then when you uncomment the useEffect part and comment the rest, it works correctly.

Funny is that it works with 16.8.0-alpha.1 but not with 16.8.2.

[acdlite]

Should be fixed by https://github.com/facebook/react/pull/14852 which was just merged into master

[jaydenseric]

Is there a way install React at a particular commit on master to test it out? I think this bug is causing my rendering issues, but it would be great to know for sure so I can either wait for the release or keep digging.

[lukewlms]

@jaydenseric How to install NPM modules from GitHub is a pretty common question, check out this thread.

[jaydenseric]

@lukewlms thanks for the tip, but I know how that works; I support Git install for the packages I publish. I don't think it will work here, since React is a monorepo of packages and the package.json at the root is neither for react or react-dom (I'm actually not sure which package the fix is for), nor does it have a prepare script so it won't be built by npm on install.

[acdlite]

I've just published a canary release that includes the bugfix. You can install it by updating your React deps to

react@canary
react-dom@canary

or more specifically

[email protected]
[email protected]

[acdlite]

I've confirmed that the test case posted by @hlousekv works in the canary: https://codesandbox.io/s/wn23y2yx9k

Assuming we don't find any additional issues, we're aiming to release a patch tomorrow.

[gaearon]

Fixed in 16.8.3.
https://codesandbox.io/s/0q2z3z7xrp