-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Fix useBlockSync race condition #23292
Conversation
Size Change: -11 B (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
@@ -108,6 +108,9 @@ export default function useBlockSync( { | |||
// waiting for React renders for changes. | |||
const onInputRef = useRef( onInput ); | |||
const onChangeRef = useRef( onChange ); | |||
onInputRef.current = onInput; |
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.
This is a side effect, so it needs to be wrapped in an effect hook.
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 wrapped in an effect but I suspect that it's what's causing the issue. Subscriptions might be called with an outdated listener before the effect runs, maybe I should use useLayoutEffect. I'll need to confirm again in asblocks.
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.
Yes, useLayoutEffect
is used for stuff like this that needs to be sync.
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.
So I tested again, and useEffect seems sufficient so i think we can move forward here.
baafa5b
to
4dfdee4
Compare
I noticed this while working on https://github.com/youknowriad/asblocks.
Sometimes when you change something in blocks, like type a character, the
onChange
handler gets called twice for the same value, causing all sorts of issues if a new change happened in the meantime. I think it's related to the fact that the subscription is "renewed" each time onChange or onInput changes. This shouldn't be the case and subscriptions should just use the last callbacks. That's what this PR does (that solved the issue for me btw)