Skip to content
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

Compatibility with createRoot for latest concurrent mode #1529

Closed
SamyPesse opened this issue Jan 25, 2020 · 5 comments
Closed

Compatibility with createRoot for latest concurrent mode #1529

SamyPesse opened this issue Jan 25, 2020 · 5 comments
Labels
has: pr Subject of a pull request project:react-native-web Issue associated with react-native-web

Comments

@SamyPesse
Copy link

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:

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
Copy link
Owner

necolas commented Mar 30, 2020

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

@hosseinmd
Copy link
Contributor

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
Copy link
Contributor

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.

@necolas necolas added this to the 0.15 milestone Oct 27, 2020
@necolas necolas modified the milestones: 0.15, 0.16 Dec 8, 2020
@necolas necolas removed this from the 0.16 milestone Mar 29, 2021
@cdeszaq
Copy link

cdeszaq commented Sep 9, 2021

I see this was removed from the 0.16 milestone, but not added to any subsequent one. Any idea when this might be target for getting into a release? We'd love to be able to leverage these concurrent capabilities everywhere from our RN codebase.

@tpisto
Copy link

tpisto commented Jun 27, 2022

Hi! Any updates on this?

@necolas necolas added the project:react-native-web Issue associated with react-native-web label Jul 2, 2022
@necolas necolas added this to the 0.20: React 18 milestone Jul 8, 2022
necolas pushed a commit that referenced this issue Aug 26, 2022
* Support React 18 concurrency and constraints.
* Add new render / hydrate functions.
* Remove uses of findNodeHandle.
* Expose ability to unmount an application once ran.

Fix #1529
Close #2330
@necolas necolas added the has: pr Subject of a pull request label Aug 26, 2022
necolas pushed a commit that referenced this issue Aug 30, 2022
* Support React 18 concurrency and constraints.
* Add new render / hydrate functions.
* Remove uses of findNodeHandle.
* Expose ability to unmount an application once ran.

Fix #1529
Close #2330
necolas pushed a commit that referenced this issue Nov 28, 2022
* Support React 18 concurrency and constraints.
* Add new render / hydrate functions.
* Remove uses of findNodeHandle.
* Expose ability to unmount an application once ran.

Fix #1529
Close #2330
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has: pr Subject of a pull request project:react-native-web Issue associated with react-native-web
Projects
None yet
Development

No branches or pull requests

5 participants