Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling setState during component rendering causes incorrect previous state value in next state update #14849

Closed
hlousekv opened this issue Feb 14, 2019 · 14 comments

Comments

@hlousekv
Copy link

hlousekv commented Feb 14, 2019

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
Copy link
Collaborator

gaearon commented Feb 14, 2019

This is a bug.

@aaronjensen
Copy link

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
Copy link
Collaborator

gaearon commented Feb 14, 2019

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

@AzzkiyOne
Copy link

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
Copy link
Collaborator

gaearon commented 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
Copy link

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
Copy link

michalkvasnicak commented 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 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
Copy link
Collaborator

acdlite commented Feb 19, 2019

Should be fixed by #14852 which was just merged into master

@jaydenseric
Copy link

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
Copy link

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

@jaydenseric
Copy link

jaydenseric commented 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.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
Copy link
Collaborator

acdlite commented Feb 20, 2019

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

react@0.0.0-b668168d4
react-dom@0.0.0-b668168d4

@acdlite
Copy link
Collaborator

acdlite commented 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
Copy link
Collaborator

gaearon commented Feb 21, 2019

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

@gaearon gaearon closed this as completed Feb 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants