-
Notifications
You must be signed in to change notification settings - Fork 46.4k
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
multiple setState
calls in async callbacks trigger multilple updates
#16377
Comments
related topic You can use |
By "update", do you mean render call or the state update itself? I clicked all three buttons many times, got both A & B to 100+ and their values were equal. |
If you inspect the console and compare the two codesandbox examples you should see a difference. By update I mean how many times the The usage of
|
@kunukn So you mean I should not assume that multiple |
@wangcheng678 could you please show a link to the documentation where it says that multiple setState calls will result to a single update? |
@miraage My point is the behavior is different in sync and async callbacks. |
@wangcheng678
|
@miraage |
@TroyTae please read the tweet itself:
It means that |
@miraage |
@wangcheng678 #16387 (comment) |
(Btw this is how it always worked, and is unrelated to Hooks) |
Do you want to request a feature or report a bug?
bug
What is the current behavior?
When using
usingState
hook, mutiplesetState
calls in async callbacks will trigger multiple updates anduseEffect
s.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/react-async-set-state-bug-zsztm
Click 'sync' button,
countA
andcountB
will be updated at the same time. TheuseEffect
will run only ONCE with the updatedcountA
andcountB
.Click 'async' button,
countA
andcountB
will be updated in sequence. TheuseEffect
will run TWICE with the updatedcountA
and oldcountB
at the first time and both updated values at the second time.What is the expected behavior?
The two
setState
s should only triger one update.Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.9.0
The text was updated successfully, but these errors were encountered: