Module details

Concurrent React

Length: 4 hours

Level: B

Categories: React

Description

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.

Book a training
Agenda

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.

Other modules

See more
modules