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

concurrent mode vs concurrent feature #6518

Closed
hkjpotato opened this issue Dec 25, 2023 · 4 comments
Closed

concurrent mode vs concurrent feature #6518

hkjpotato opened this issue Dec 25, 2023 · 4 comments

Comments

@hkjpotato
Copy link

hkjpotato commented Dec 25, 2023

in react new doc site, we only mention "concurrent feature" now https://react.dev/blog/2021/12/17/react-conf-2021-recap#react-18-and-concurrent-features
Screenshot 2023-12-25 at 10 50 47 AM

yet, in react's code, "ConcurrentMode" is still used (e.g. https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberBeginWork.js#L2524), this becomes more confusing after diving into the code and realize historically we also have "Blocking" mode facebook/react#20974 ...and more

Screenshot 2023-12-25 at 10 59 43 AM

q1: does React has some kind of "terms" wiki to explain what all these modes were/are?
q2: iiuc, after updating to React18, with ReactDOM.render it is still a legacy mode root (even Suspense cannot trigger concurrent rendering). Only createRoot will create a current root (so as to use concurrent feature).

However, I only find some fragmented info online about the difference: e.g.

  1. legacy suspense still exists in legacy root Behavioral changes to Suspense in React 18 reactwg/react-18#7 (reply in thread)
  2. automatic batching is only enabled with concurrent root https://dev.to/devmoustafa97/do-you-know-unstablebatchedupdates-in-react-enforce-batching-state-update-5cn2

Can we provide a list of difference on ReactDOM.render vs createRoot.render in react18?

this could help dev to understand / explain the changes (often behind feature flag) in org.

@gaearon
Copy link
Member

gaearon commented Dec 26, 2023

From the user’s perspective, there are no modes. You should ignore React’s source code — it can always lag behind public naming. We don’t expect anyone to read the source code, so if you choose to do it, then the confusion is kind of on you. :)

The story goes like this:

  • React has some features that rely on concurrent rendering (like Suspense). Those features are opt-in. You have to upgrade to React 18 to use them.
  • The process of upgrading to React 18 includes migrating from render to createRoot. Until you do that, your migration isn’t complete. That’s what the deprecation warning says.

That’s basically the story. Yes, in practice some features are half-supported before 18 (like Suspense). But we don’t consider it valid to run render with 18 so it’s not something we’re planning to document in detail. In 18 there is only one mode (for which you use createRoot).

@gaearon gaearon closed this as completed Dec 26, 2023
@hkjpotato
Copy link
Author

hkjpotato commented Dec 26, 2023

@gaearon it will still be great if React can help provide a list of expected difference, as we do see mysterious bugs when switching from ReactDOM to createRoot.

What might happen in an org is: the infra team will upgrade to lib to 18, but keep everything in the legacy root, and ask each feature team to adopt the createRoot to complete the migration. An official doc list will help us to provide guidance.

....

don’t expect anyone to read the source code

so far I still feel the best way to "explain hook" is to look into the source code/data structure to think of them as linked-list nodes :0

@rickhanlonii
Copy link
Member

@hkjpotato we've provided a guide here.

@kjhuang-db
Copy link

@rickhanlonii thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants