-
Notifications
You must be signed in to change notification settings - Fork 585
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
Flush RN task queue with invokeAsync #4389
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tomduncalf
changed the title
TTd/fix rn queue issue invoke async
Flush RN task queue with invokeAsync
Mar 2, 2022
9 tasks
tomduncalf
force-pushed
the
td/fix-rn-queue-issue-invoke-async
branch
from
April 19, 2022 10:24
86c375a
to
34fcb41
Compare
…by calling jsCallInvoker->invokeAsync. React Native has its own JS "microtask" queue, implemented in https://github.com/facebook/react-native/blob/main/Libraries/Core/Timers/JSTimers.js. Any asynchronous work, e.g. `setTimeout` or `setImmediate`, is added to this queue, and the queue is flushed whenever a message is sent from React Native's native core to JS: https://github.com/facebook/react-native/blob/main/Libraries/BatchedBridge/MessageQueue.js#L108. However, our native to JS messages are not being passed via this abstraction - instead, we hook directly into the JS engine. This means that React Native is not aware that when Realm has done some async work, we might need to update the UI (and therefore flush the task queue), and this can result in Realm-related UI updates not showing until some action is taken which causes React Native to send a message from the core to JS (e.g. touching the screen), which flushes this task queue, resolving pending promises and updating the UI. This commit calls the React Native jsCallInvoker->invokeAsync method, which internally flushes the task queue. As this method is async, we wait for any current pending invocation to complete before triggering another one (using a flag, so the call is "debounced")
tomduncalf
force-pushed
the
td/fix-rn-queue-issue-invoke-async
branch
from
April 19, 2022 11:20
34fcb41
to
c7dccf5
Compare
tomduncalf
commented
Apr 25, 2022
tomduncalf
force-pushed
the
td/fix-rn-queue-issue-invoke-async
branch
from
April 26, 2022 11:11
aabc001
to
0e1da78
Compare
tomduncalf
force-pushed
the
td/fix-rn-queue-issue-invoke-async
branch
from
April 26, 2022 11:15
0e1da78
to
1a1b6e3
Compare
This was referenced Apr 26, 2022
Open
kneth
approved these changes
Apr 27, 2022
11 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What, How & Why?
This closes #3571, #4389
React Native has its own JS "microtask" queue, implemented in https://github.com/facebook/react-native/blob/main/Libraries/Core/Timers/JSTimers.js. Any asynchronous work, e.g. setTimeout or setImmediate, is added to this queue, and the queue is flushed whenever a message is sent from React Native's native core to JS: https://github.com/facebook/react-native/blob/main/Libraries/BatchedBridge/MessageQueue.js#L108.
However, our native to JS messages are not being passed via this abstraction - instead, we hook directly into the JS engine. This means that React Native is not aware that when Realm has done some async work, we might need to update the UI (and therefore flush the task queue), and this can result in Realm-related UI updates not showing until some action is taken which causes React Native to send a message from the core to JS (e.g. touching the screen), which flushes this task queue, resolving pending promises and updating the UI.
After some discussion and research (e.g. facebook/react-native#33006), it was determined that exposing and calling the
invokeAsync
method from the React NativeCallInvoker
was the most reliable way of triggering a flush of this queue without having to modify React Native internals to directly expose theirflush
method – the other approaach we tried (exposing an internal React Native JS function to flush the queue, see #4330) was not 100% reliable.We pass a lambda which calls this method (debounced, so we don't call it multiple times if it has not yet been invoked asynchronously) down from our RN module initialization code into the JSC code, which can then call this method whenever we make call from C++ to JS.
This issue could not be reproduced on Android, and the current Android JSC "trampoline" makes it hard to work out how to call into
invokeAsync
in the same way. However, it should be possible to port this fix to the Hermes branch for Android as that code has been reworked.☑️ ToDos
Compatibility
label is updated or copied from previous entryBreaking
label has been applied or is not necessaryIf this PR adds or changes public API's: