React-native-web: Compatibility with createRoot for latest concurrent mode

[SamyPesse]

Using react-native-web relies on AppRegistry.runApplication which doesn't use ReactDOM.createRoot. It means that using suspense with react-native-web is only possible using the previous Suspense API (<React.unstable_ConcurrentMode>), since then the React had released great new concurrent APIs such as useTransition, or useDeferredValue.

Supporting concurrent mode with react-native-web will require:

• Replace uses of deprecated React API (legacy context https://github.com/necolas/react-native-web/issues/1506, findDOMNode)
• Use ReactDOM.createRoot in renderApplication

I think a potential solution in the short term could be to use ReactDOM.createRoot when an option is passed to AppRegistry.runApplication so that it supports both latest and older react versions.

I'd be happy to open a PR for such changes if you agree with such implementation :)

[necolas]

I'll update the implementation once a stable release of concurrent mode is available

[hosseinmd]

This is possible if we change renderApplication like this

function renderApplication<Props: Object>(
  RootComponent: ComponentType<Props>,
  WrapperComponent?: ?ComponentType<*>,
  callback?: () => void,
  options: {
    initialProps: Props,
    rootTag: any,
    mode: 'Concurrent' | 'Blocking' | 'Legacy',
  },
) {
  const {initialProps, rootTag, mode} = options;

  invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);

  const App = (
    <AppContainer rootTag={rootTag} WrapperComponent={WrapperComponent}>
      <RootComponent {...initialProps} />
    </AppContainer>
  );

  if (mode === 'Concurrent') {
    ReactDOM.createRoot(rootTag).render(App, callback);
  } else if (mode === 'Blocking') {
    ReactDOM.createBlockingRoot(rootTag).render(App, callback);
  } else {
    ReactDOM.render(App, rootTag, callback);
  }
}

[hosseinmd]

I want to test react experimental on react-native-web this code help me.
could you release that in an experimental like react to test that by anyone who is curious.