Not seeing benefits of startTransition compared to web

[Almouro]

Hi,

I was trying to play with the new architecture and react 18 concurrent features, namely startTransition however, weirdly I'm not seeing any benefit, while the same code works really well on the web.

Apologies if I've missed something completely obvious! I did see Running "FabricEnabled" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1} in my packager logs.

Here's the same code running on a release APK (available here and a react-native-web version.
Both on the same device (high end Android device Samsung S10 Android 12)

• the green part is 30k views to simulate a slow UI
• On the left, we don't see any improvement on the App
• On the right, we can clearly see that it's so much better at updating the top value in priority

2022-11-02.18-26-59.mp4

Here's the code:

const SlowUI = React.memo(({value}: {value: number}) => (
  <>
    <Text style={styles.text}>SLOW UI Value: {value}</Text>
    <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
      {Array(30000)
        .fill(1)
        .map((_, index) => (
          <View
            key={index}
            style={{width: 1, height: 1, backgroundColor: 'green'}}
          />
        ))}
    </View>
  </>
));

const WithStartTransition = () => {
  const [value, setValue] = React.useState(0);
  const [deferredValue, setDeferredValue] = React.useState(0);
  const [isPending, startTransition] = React.useTransition();

  const handleClick = () => {
    const newValue = value + 1;
    setValue(newValue);
    startTransition(() => {
      setDeferredValue(newValue);
    });
  };

  return (
    <>
      <Button onPress={handleClick} title="Increment value" />
      <Text style={styles.text}>Value: {value}</Text>
      <Text style={styles.text}>
        DeferredValue: {deferredValue} {isPending ? 'PENDING' : ''}
      </Text>
      <SlowUI value={deferredValue} />
    </>
  );
};

[hurali97]

Hi everyone adding to @Almouro's findings,

I was experimenting with React18 features like startTransition, useDeferredValue and suspense in react native. In my findings, I have pretty much unexpected results. Here’s my repo where I have created 2 apps, one in react and other in react-native. So in terms of features we should have parity b/w both of them.

startTransition:

• This works same on both react and react-native. The update that’s wrapped in startTransition results in isPending being set to true when React is rendering the UI and decides to flush the urgent one first. Then it renders the non-urgent one and toggles the isPending to false. 🟢

useDeferredValue:

• This one behaves different on react & RN. On react, when we type in input we render a very slow list based on the input state value and without using uDV, we can hardly type in the input. Since, react tries to render both of them. So instead we can tell React to defer rendering until urgent one is flushed. For this, we now pass the input state value to this uDV hook and pass the returned value to Slow UI component and the difference is so smooth. On the other hand, I am unable to notice any difference with or without uDV on react native. 🔴

React

react-uDV.mp4

React Native using uDV

react-native-uDV.mp4

React Native not using uDV

react-native-no-uDV.mp4

Inspiration for the above example took from this sandbox available on react's website

suspense with startTransition:

• On react, suspense works with Relay like models or with react.lazy. So I tried with both of them and startTransition integrates very well with suspense. When we use suspense without startTransition we will see the fallback components. Which may seem not good at times, where we want the user to be able to look at the old content while new one is being prepared. So we can integrate startTransition to help us in that. Updates wrapped in startTransition will not show the fallback component, which will allow to show the old UI to the user. In our example, we notice that if we don’t use startTransition, fallback of Loading the app... will be displayed. If we use startTransition, it won’t be shown. It works well on react, but on react-native it doesn’t work as intended. We still get Loading the app displayed even after using startTransition. 🔴

Note the Loading the app... fallback component that is not visible in React but is visible in React Native

React

react-suspense.mp4

React Native

react-native-suspense.mp4

Inspiration for the above example took from this sandbox available on react's website

More resources:

• https://beta-reactjs-org-git-api-suspense-2-fbopensource.vercel.app/apis/react/useDeferredValue
• https://17.reactjs.org/docs/concurrent-mode-patterns.html

[joshuayoes]

Adding to this discussion: as of react-native@0.72.0-rc.1, useTransition appears to work as expected on Android but not iOS.

I've created a reproduction repository here: https://github.com/joshuayoes/use-transition-react-native-example

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]

Update for react-native@0.72.0-rc.3, useTransition now works on iOS but Android has regressed to previous unexpected synchronous rendering behavior.

See commit with upgrade: joshuayoes/use-transition-react-native-example@ae07562

Demos

Web	Android	iOS
use-transition-web.mov	0.72.0-rc.3-android.mov	0.72.0-rc.3-ios.mov

Profiles

Android

See React DevTools profile export for more information.

iOS

See React DevTools profile export for more information.