Calling setState during component rendering causes incorrect previous state value in next state update #14849
Description
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
Activity
gaearon commentedon Feb 14, 2019
This is a bug.
aaronjensen commentedon Feb 14, 2019
I get why this can be surprising, though I was under the impression that one should not call
setStatein a render call (because it's a side effect). Am I missing something?gaearon commentedon Feb 14, 2019
https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
AzzkiyOne commentedon Feb 15, 2019
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 commentedon Feb 15, 2019
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.
AzzkiyOne commentedon Feb 15, 2019
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 commentedon Feb 16, 2019
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
1because it will use initial state instead of updated one.Then when you uncomment the
useEffectpart and comment the rest, it works correctly.Funny is that it works with
16.8.0-alpha.1but not with16.8.2.useStateis not registered in event handleronTransitionEnd#14812acdlite commentedon Feb 19, 2019
Should be fixed by #14852 which was just merged into master
jaydenseric commentedon Feb 20, 2019
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 commentedon Feb 20, 2019
@jaydenseric How to install NPM modules from GitHub is a pretty common question, check out this thread.
jaydenseric commentedon Feb 20, 2019
@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.jsonat the root is neither forreactorreact-dom(I'm actually not sure which package the fix is for), nor does it have apreparescript so it won't be built by npm on install.acdlite commentedon Feb 20, 2019
I've just published a canary release that includes the bugfix. You can install it by updating your React deps to
or more specifically
acdlite commentedon Feb 20, 2019
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 commentedon Feb 21, 2019
Fixed in 16.8.3.
https://codesandbox.io/s/0q2z3z7xrp