As Dan Abramov, co-author of Redux and one of the main Reactjs contributors tweeted: “Concurrent React is not a set of new APIs. It’s more like lifting some restrictions on what React can do.” This is exactly what this section is about. We’ll introduce new concepts (and the corresponding APIs) of React 16+ that makes it even more asynchronous and prepares developers to write the next generation React code.
Concurrency allows React to prioritize updates according to importance. Under the hood, each update has an assigned priority level which determines the order in which it is processed. This allows updates with higher priority levels to interrupt low priority work even if the low priority work has already started. We’ll turn on concurrent mode and play with it.
New React implementations provide us with the ability to lazy load components and implement code splitting in projects without much effort.
In this section we’ll introduce new concurrent-ready attachment points for React. To start we’d like to compare the React.render() and React.createRoot() methods. After that we’ll show the ability to prerender roots or load them lazily.
Time Slicing is a generic way to ensure that high-priority updates don’t get blocked by low-priority updates. We’ll introduce the new scheduleCallback() and flushSync() APIs and demonstrate the difference in their execution priorities.
Explain the multiple loaders issue. Show how we can make fetching data code more declarative and prevent a cascade of spinners.
react-cache is a reference to the React Suspense cache implementation maintained by the React team. It was previously known as simple-cache-provider. We’ll tackle the concepts of reading, invalidating and preloading cache.