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
bugfix: useSyncExternalStore() seems to be not solid in avoiding tearing #27180
Conversation
Hi @JSerZANP! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
// Unless we're rendering a blocking lane, schedule a consistency check. | ||
// Right before committing, we will walk the tree and check if any of the | ||
// stores were mutated. | ||
const root: FiberRoot | null = getWorkInProgressRoot(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just moved the consistency check out from the if condition, nothing more.
Comparing: 493f72b...edd152a Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
067c306
to
edd152a
Compare
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
I don't think I understand the use case for the store not emitting? I believe uSES requires that when the store changes the change is emitted. |
@rickhanlonii thank you for taking a look! Maybe this was not a good example, but I was thinking about some throttled event stream like scroll or mouse movement.
If we have this assumption, then I have a question on the necessity of consistency check. Since inside the subscribe callback from uSES, React schedules SyncLane update on target fiber nodes.
If I use |
The consistency check is needed only when Notice that without the consistency check, React would commit the torn values with A0, B0, and C1. With the check, React restarts the render and renders A1 B1 and C1 together. |
@rickhanlonii thanks for the reply. |
Summary
Currently the update branch of
useSyncExternalStore()
-updateSyncExternalStore()
sets up consistency check conditionally, while formountSyncExternalStore()
it is unconditionally.This results in tearing still being possible when store mutates during rendering in concurrent mode,
if the mutation is not with emitting(which is possible considering the throttling of continuous events).
Here is the repro on stackblitz
Proposed Fix
Same as
mountSyncExternalStore()
, we should add consistency check without condition.How did you test this change?
Added one more test case, which didn't pass before the fix