Concurrent React

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.

‍