🚧 CONCURRENT MODE IS EXPERIMENTAL! 🚧

Michael Chan has years of experience with React, and in this course, he will guide you through the ins-and-outs of working with Suspense. 

React Suspense gives us a new way of describing with fine-grain controls how users experience should look based on data we have or don’t have.

This will change the way you build React applications forever and this is the opportunity to get an early look and head start!





Welcome!

We're going to have a great time exploring React's experimental Concurrent Mode.
Concurrent Mode is an exciting leap forward in user interface development. It allows us to describe user interface transitions in beautiful detail.

Apps aren't static. They move — responding to user input as they dart back and forth to the internet for data.
Concurrent Mode and Suspense give us a language for those movements.

In this video we talk project setup, how to find help, and what to expect from this very exciting, very experimental feature.

This course is narrowly focused on Concurrent Mode and Suspense. We will not cover adjacent topics like styling or code organization.

Build an App with React Suspense: Intro and Setup

The Suspense component isn't new. We've been able to use it since 2018.

Learn the simplest way to start using Suspense in any React codebase (v16.6 or later), using dynamic imports.

Import Components Lazily with Suspense React.lazy

JavaScript's try/catch feature allows you to isolate errors and prevent them from halting execution in adjacent parts of an app.

Error boundaries do the same for component trees. They allow you to isolate errors and send them to an error reporting service.

Let's learn they are used to catch errors thrown by promises.

Catch Errors with a React Error Boundary Component

React Suspense won't magically detect and inspect promises in your code. You have to wrap promises to communicate promise status to Suspense and Error Boundaries.

React.lazy acts as a model for which states we need our promise wrappers to handle.

Understand How React.lazy Communicates Loading Status to Suspense and Error Boundaries

We can write our own promises wrappers to communicate pending, error, and success statuses to Suspense and error boundaries components.

The wrapper we write in this lesson is the minimum viable wrapper required for data fetching. Knowing how to wrap promises for communication with Suspense and error boundaries allows you to suspend any asynchronous data.

Wrap Fetch Requests to Communicate Pending, Error and Success Status to React Suspense

Separating concerns can improve code re-use.
Keeping API functions separate from components can be a nice way to isolate concerns with the data layer and make data fetching functions available to other modules.

Separate API Utility Functions from React Components

The useState Hook is the best way to track state in React. It's capabilities aren't limited to known values either. State can be set with asynchronously resolved values as well — like the result of a fetch request. Wrapped promises can be given to useState to communicate promise status for state transitions.

Track Async Requests with React's useState Hook

Concurrent Mode is a completely different rendering paradigm for React.  
It changes something that has remained constant since the first version of React: `ReactDOM.render`.

To use Concurrent Mode, we use `ReactDom.createRoot`.
It's API is slightly different then the old faithful `ReactDOM.render` but, with this one change, we can access the future of React.

Enable Suspense Features with Experimental Concurrent Mode using ReactDOM.createRoot

In blocking rendering, all updates have the same priority.

In Concurrent Mode, work is "interruptible". And user-blocking updates are treated with highest importance.

To keep interfaces interactive and snappy, we can de-prioritize slower updates.

The useTransition Hook — and its startTransition function — allows React to schedule work after higher priority work.

De-prioritize NonUser-Blocking Updates with React useTransition's startTransition Function

Suspense components know one thing — how to show a fallback when promises are pending.

But that means, as we request new data is requested in those Suspense boundaries, the previous data will be replaced with the fallback.

This is known as the "receded state".

We can configure `useTransition` to present the the previous rendering of the component for a specified duration with the `timeoutMs' option.

Bypass Receded Views with React useTransition's timeoutMs Option

It's a good practice to give users immediate feedback while asynchronous work is being completed.

`useTransition` returns a boolean we can use to conditionally render loading UI.
This boolean is the second element in the array `useTransition`s returns. By convention, it's assigned to a variable named `isPending`.

Display Loading States Conditionally with React.useTransition's isPending Boolean

Eager delay spinners are not a good user experience.  
They can make a snappy user interface feel slower.

We want delay spinners to appear only after a perceivable delay.  
`useTransition` doesn't yet have an API for customizing this.  
Until it does, we can use CSS animations to delay visibility of delay spinners.

Delay the Appearance of a Loading Spinner with CSS in React

The `useDeferredValue` Hook gives us a way to hold onto a previous resource values while waiting for a new one.

This is a more hands-on alternative to the magic of `useTransition`.  
With `useTransition`, React "keeps" the previous rendering and gives you a magical `isPending` boolean to conditionally show loading UI.

`useDeferredValue` puts you in the driver seat by giving you the actual value.  
This value can be used to implement our own `isPending`.

Get Previous Resource Values with React’s useDeferredState Hook

Hoisting state is a common Refactoring in React.  
State in one component may need to be lifted up to a parent component for coordination with other component state.

This can be an error-prone refactoring.  
With a good editor, it's best to start with the returned JSX and move out.

Hoist React Component State

Suspense can have an unfriendly learning curve.  
Components with suspended content need a component boundary.  
Resource reads can't happen in the same component as the `Suspense` and error boundaries components.

When you have your Suspense and error boundary components in place but still get errors about them absence, you probably need to move a `read()` call into a component.

Avoid this Common Suspense Gotcha in by Reading Data From Components

`SuspenseList` is how React coordinates the reveal order of `Suspense` components.  
It only accepts `Suspense` components as children — which can effect where you error boundaries are placed.

By default `SuspenseList` will show suspended component fallbacks together and reveal `children` as suspenders resolve.

Coordinate Fallback Rendering with the React SuspenseList Component

`revealOrder` is one of `SuspenseList`s configuration options. It can be undefined, `together`, `forwards`, and `backwards`.

* `undefined` (default): reveal children as suspenders resolve
* `together`: reveal children together, once all suspenders are resolved
* `forwards`: render children from top to bottom, indifferent to suspender resolution order
* `backwards`: render children from bottom to top, indifferent to suspender resolution order

Reveal Suspense Components in Order with SuspenseList's revealOrder Prop in React

`tail` is a customization prop for `SuspenseList`. It works in tandem with `revealOrder` and has three options: `undefined`, `collapsed`, and `hidden`.

These options can be used to configure how fallbacks are displayed.

* `undefined`: show all `fallbacks`
* `hidden`: show no `fallbacks`
* `collapsed`: show only the next `fallback`

Avoid Too Many Spinners with React SuspenseList’s tail Prop

The `useState` functions we wrap in `useTransition` function wrappers can be passed around to components like any callback.
Instead of making all of your components aware of Concurrent Mode, you can provide wrapped callbacks and continue compatibility with both legacy and future React code.

Pass React Components a useTransition-Wrapped, State-Setting, Callback

You're never stuck with the data you get from the server.  
The Pokeapi doesn't have an id property on Pokemon but we can transform our response to include exactly what we need.

With a little destructuring assignment and object spread we can augment our API with helpful properties

Augment React Resource JSON with Custom Properties

React is about re-useable components.  
Often we put to many opinions into our components and diminish that re-useability.

`React.Fragment`, an `as` component prop, a `renderItem` render prop, JSX spread attributes, and object default values are tools you can use to make truly re-useable list components.

Extract Reusable React Components with an As Prop, Render Props, and React.Fragment

Our app has evolved.  
It doesn't make sense to scrub thru Pokemon one at a time when we have a list.
Let's change the function of our "Next" button to fetch the next page of Pokemon results by adding a new endpoint and connecting it to Suspense transitions.

Connect a New Endpoints in a React Suspense App

Proper Suspense code can mean a lot of functions wrapped in other functions.  
Because these function are composed with Hooks, modules can't help us hide the implementation details.  
But Context can!

Let's explore how Context Providers, Consumers, and the `useContext` Hook can integrate with Suspense to mask wordy `useTransition`-wrapped API calls.

Build an App with React Suspense

Instructor

What you'll learn

Course Content