Unexpected useTransition behavior on iOS

[joshuayoes]

This repository implements the React docs example of the useTransition hook in React Native on version 0.72.0-rc.1.

This demo tap the Posts (slow) button and then the Contacts button. According the docs, tapping the Contacts button should show the ContactTab view on the next render and skip committing the render of the PostsTab view.

On Web and Android, only 2 renders happen, skipping the slow PostsTab render tree. However, on iOS, 4 renders happen, synchronously blocking the next render until the slow PostsTab render tree is commited.

Demos

Web	Android	iOS
use-transition-web.mov	use-transition-android.mov	use-transition-ios.mov

Profiles

Android

Using npx react-devtools, you can see that Android only renders twice.

1. Initial Render
2. ContactTab render

The "Posts (slow)" view is not committed to the render tree because the "Contact" view finishes rendering first. See React DevTools profile export for more information.

iOS

On iOS, this example shows 4 renders.

1. Initial Render
2. PostsTab render
3. onClick props change to TabButton
4. ContactTab render

See React DevTools profile export for more information.

[joshuayoes]

This example runs with fabric and concurrentRoot enabled:

[joshuayoes]

Others seem to have this issue on past versions: reactwg/react-native-new-architecture#94

[sammy-SC]

Hello @joshuayoes,

thank you for the report. You're right, there is an issue with concurrent rendering.
For more context, React Native uses native scheduler which interrupts React's render cycle. The native scheduler is called "RuntimeScheduler" and it isn't used right now. We have a fix: facebook/react#26554 but need to make some additional changes to the PR before it is merged.

[joshuayoes]

Thank you for that context @sammy-SC!

Does this mean the native scheduler isn't being used across both iOS and Android now?

[joshuayoes]

I've retested with react-native@0.72.0-rc.3 and it appears that iOS is working as expected now, but Android has regressed back to synchronous rendering behavior.

reactwg/react-native-new-architecture#94 (reply in thread)