Introducing React 18 · reactwg/react-18 · Discussion #4 (original) (raw)
Overview
Welcome to the first post in the React 18 workgroup!
This post is intended to provide an overview for the plan for React 18 and serve as a jumping point to other topics in the discussion. At a high level, React 18 includes out-of-the-box improvements to existing features. It is also the first React release to add support for Concurrent Features, which let you improve the user experience in ways that React didn't allow before.
Concurrent Features are opt-in and can be adopted gradually.
Out-of-the-box improvements
React 18 will include out-of-the-box improvements:
Most apps should be able to upgrade to React 18 using the New Root API and immediately see wins from these improvements.
Once on React 18 you can begin to use concurrent features!
Concurrent features
React 18 will be the first React release adding opt-in support for concurrent features such as:
- startTransition: lets you keep the UI responsive during an expensive state transition.
useDeferredValuelets you defer updating the less important parts of the screen.- Streaming SSR with selective hydration: lets your app load and become interactive faster.
You can start using these features in a small part of your tree without enabling Strict Mode for your entire app.
Note: if you're familiar with concurrent "mode", see: What happened to concurrent "mode".
What about Suspense for data fetching?
The React 18 release includes the foundational work related to <Suspense>, but it will likely not include the recommended data fetching solution yet. A complete solution would need to include Server Components and a built-in Cache, and these projects are still in progress. We expect to see them complete during the 18.x timeline, but not necessarily in the 18.0 initial release.
For full details about <Suspense> in React 18, see this answer.
How to upgrade
Upgrading to React 18 will be the same as any React major such as 16 and 17 (by updating to the latest React 18 release with the additional step of switching from ReactDOM.render to ReactDOM.createRoot. After upgrading, we recommend testing your app as you normally would with an upgrade to flush out any of the issues surfaced by the out-of-the-box improvements.
For specific technical upgrade guides, see:
Once you’ve upgraded to React 18, you can begin using concurrent features:
- Coming soon: How to gradually use concurrent features
- Coming soon: Concurrent React for library authors.