| name | route |
|---|---|
Introduction |
/ |
Concurrent React is an umbrella name for a new set of APIs resulting from the React Fiber rewrite. It was previously known as "Async React".
The new name emphasizes React's new ability to concurrently render, suspend, and resume rendering frames in the background while remaining interactive (aka not destroying old frames while rendering the next). This ability helps Concurrent React apps adapt to the user's device and network, allowing for fast interactions to feel instant while slower interactions feel responsive.
Concurrent React includes features like Time Slicing and React Suspense.
New libraries have also been introduced in relation to these features, like scheduler and react-cache.
The canonical sources of information for Concurrent React is given in two talks by the React team:
- React Conf 2018: Concurrent Rendering in React: https://www.youtube.com/watch?v=ByBPyMBTzM0&t=1305s
- JSConf Iceland: Beyond React 16: https://www.youtube.com/watch?v=v6iR3Zk4oDY
You can try the demos here:
- Try the React Suspense fixture or
- the Time Slicing fixture or
- the JSConf Iceland Movie Demo on CodeSandBox.
There are also more talks available in the Timeline.
As of 22 May 2019 these features were available (with unstable_ flag):
- react
- react-dom
- react-cache (note public version of
react-cachehas fallen out of sync with current version of react, use react v16.6 alpha and react-cache v16.6 alpha if need to) - scheduler
This site is an attempt to sum up the state of knowledge with regards to Concurrent React. It is curated by swyx and is not to be taken as a replacement for any of the official communication from the React team.
This site is for early adopters only. Be warned that many APIs here are completely unstable.
It will be impossible to keep up with all the changes so examples may break when copy-pasted.
We will also write about APIs without the unstable_ prefix, but it is very much implied.
We will note the current API at the start and for the rest of the section drop the unstable_ prefix.
For example, see the next section on <ConcurrentMode>.
💀 This section used to document
<ConcurrentMode>, but it has been deprecated for reasons.
Note: Your app must be <StrictMode> compliant first before you apply ConcurrentMode - read more about StrictMode in the docs
API: ReactDOM.unstable_createRoot
If you use this instead of ReactDOM.render, ReactDOM.createRoot creates Concurrent root for your whole app (yes, you can have multiple roots). For more info, see the separate Roots doc.
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);Time Slicing is a generic way to ensure that high-priority updates don’t get blocked by a low-priority update.
Problems it solves: When rendering is CPU-bound.
React Suspense is a generic way for components to suspend rendering while they load data from a cache.
Problems it solves: When rendering is I/O-bound.
It is a fundamentally new capability that
- lets you render a component tree “in background”
- while components are fetching data, and
- display them only after the whole tree is ready.
For slow connections, it gives you full control over where and when to show a placeholder. It doesn’t destroy the previous view while this is happening.
Next: Time Slicing
Recommended Sources for further info:
- [React 16.3 and 16.4 Umbrella Issue](useful for pre-rendering via createBatch)
- Codesandbox with running example
- JSConf Iceland 2018 Demo
- Beyond React 16 Blogpost