|
| 1 | + --- |
| 2 | + name: Introduction |
| 3 | + route: / |
| 4 | + --- |
| 5 | + |
| 6 | +# Introduction: What is Concurrent React? |
| 7 | + |
| 8 | +Concurrent React is an umbrella name for a new set of APIs resulting from the React Fiber rewrite. |
| 9 | +It was previously known as "Async React". |
| 10 | + |
| 11 | +The new name emphasizes React's new ability to concurrently render, suspend, and resume rendering frames |
| 12 | +in the background _while remaining interactive_ (aka not destroying old frames while rendering the next). |
| 13 | +This ability helps Concurrent React apps adapt to the user's device and network, |
| 14 | +allowing for fast interactions to feel instant while slower interactions feel responsive. |
| 15 | + |
| 16 | +Concurrent React includes features like **Time Slicing** and **React Suspense**. |
| 17 | +New libraries have also been introduced in relation to these features, like `scheduler` and `react-cache`. |
| 18 | + |
| 19 | +The canonical sources of information for Concurrent React is given in two talks by the React team: |
| 20 | + |
| 21 | +- React Conf 2018: Concurrent Rendering in React: https://www.youtube.com/watch?v=ByBPyMBTzM0&t=1305s |
| 22 | +- JSConf Iceland: Beyond React 16: https://www.youtube.com/watch?v=v6iR3Zk4oDY |
| 23 | + |
| 24 | +You can try the demos here: |
| 25 | + |
| 26 | +- Try the [React Suspense fixture](https://codesandbox.io/s/k3m2rq627o) or |
| 27 | +- the [Time Slicing fixture](https://codesandbox.io/s/xl3rjr9mjo) or |
| 28 | +- the [JSConf Iceland Movie Demo](https://codesandbox.io/s/r76q199xxn) on CodeSandBox. |
| 29 | + |
| 30 | +There are also more talks available in the [Timeline](/Timeline.md). |
| 31 | + |
| 32 | +As of 22 May 2019 these features were available (with `unstable_` flag): |
| 33 | + |
| 34 | +- [react](https://www.npmjs.com/package/react) |
| 35 | +- [react-dom](https://www.npmjs.com/package/react-dom) |
| 36 | +- [react-cache](https://www.npmjs.com/package/react-cache) (note public version of `react-cache` has fallen out of sync with current version of react, use [react v16.6 alpha](https://www.npmjs.com/package/react-cache/v/16.6.0-alpha.8af6728) and [react-cache v16.6 alpha](https://www.npmjs.com/package/react-cache/v/16.6.0-alpha.8af6728) if need to) |
| 37 | +- [scheduler](https://www.npmjs.com/package/scheduler) |
| 38 | + |
| 39 | +This site is an attempt to sum up the state of knowledge with regards to Concurrent React. |
| 40 | +It is curated by [swyx](http://twitter.com/swyx) and is not to be taken as a replacement for any |
| 41 | +of the official communication from the React team. |
| 42 | + |
| 43 | +## ⚠️ Unstable APIs ⚠️ |
| 44 | + |
| 45 | +This site is for early adopters only. Be warned that many APIs here are completely unstable. |
| 46 | + |
| 47 | +It will be impossible to keep up with all the changes so examples may break when copy-pasted. |
| 48 | + |
| 49 | +We will also write about APIs without the `unstable_` prefix, but it is very much implied. |
| 50 | +We will note the current API at the start and for the rest of the section drop the `unstable_` prefix. |
| 51 | + |
| 52 | +For example, see the next section on `<ConcurrentMode>`. |
| 53 | + |
| 54 | +## `<ConcurrentMode>` deprecated |
| 55 | + |
| 56 | +> 💀 This section used to document `<ConcurrentMode>`, but it [has been deprecated](https://github.com/facebook/react/pull/15532) for [reasons](https://github.com/facebook/react/pull/15502/files). |
| 57 | +
|
| 58 | +_Note: Your app must be `<StrictMode>` compliant first before you apply `ConcurrentMode` - [read more about StrictMode in the docs](https://reactjs.org/docs/strict-mode.html)_ |
| 59 | + |
| 60 | +## Alternatively; `ReactDOM.createRoot` |
| 61 | + |
| 62 | +_API: `ReactDOM.unstable_createRoot`_ |
| 63 | + |
| 64 | +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. |
| 65 | + |
| 66 | +```js |
| 67 | +const container = document.getElementById('root'); |
| 68 | +const root = ReactDOM.createRoot(container); |
| 69 | +root.render(<App />); |
| 70 | +``` |
| 71 | + |
| 72 | +## What is Time Slicing? |
| 73 | + |
| 74 | +Time Slicing is a generic way to ensure that high-priority updates don’t get blocked by a low-priority update. |
| 75 | + |
| 76 | +**Problems it solves**: When rendering is **CPU-bound**. |
| 77 | + |
| 78 | +## What is React Suspense? |
| 79 | + |
| 80 | +React Suspense is a generic way for components to suspend rendering while they load data from a cache. |
| 81 | + |
| 82 | +**Problems it solves**: When rendering is **I/O-bound**. |
| 83 | + |
| 84 | +It is a fundamentally new capability that |
| 85 | + |
| 86 | +- lets you render a component tree “in background” |
| 87 | +- while components are fetching data, and |
| 88 | +- display them only after the whole tree is ready. |
| 89 | + |
| 90 | +For slow connections, it gives you full control over where and when to show a placeholder. |
| 91 | +It doesn’t destroy the previous view while this is happening. |
| 92 | + |
| 93 | +--- |
| 94 | + |
| 95 | +> Next: [Time Slicing](time-slicing.md) |
| 96 | +
|
| 97 | +--- |
| 98 | + |
| 99 | +**Recommended Sources for further info:** |
| 100 | + |
| 101 | +- [React 16.3 and 16.4 Umbrella Issue](useful for pre-rendering via createBatch) |
| 102 | +- [Codesandbox with running example](https://codesandbox.io/s/w0n9ok3mqw) |
| 103 | +- [JSConf Iceland 2018 Demo](https://www.youtube.com/watch?v=nLF0n9SACd4) |
| 104 | +- [Beyond React 16 Blogpost](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) |
0 commit comments