.webp)
Concurrent React
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.
a. Intro to Concurrent React
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.
b. Lazy loading React components
New React implementations provide us with the ability to lazy load components and implement code splitting in projects without much effort.
c. React Roots
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.
d. Time slicing
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.
e. Suspense
Explain the multiple loaders issue. Show how we can make fetching data code more declarative and prevent a cascade of spinners.
f. React cache
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.
