React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

🚧 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!





Taylor Bell: Hey, Michael. Thanks so much for joining me.Michael Chan: Yeah, of course. I'm happy to be here.Taylor Bell: Awesome. So I just wanted to talk to you a little bit about Suspense. So in your words, what is suspense?Michael Chan: Oh, man, so Suspense is this new experimental API that React gave us. It was announced this year and it's fully experimental, I guess, that that comes with, but it's really cool. I think the best way to describe it is it helps you communicate transitions of state in your application in a really nice declarative way and organize your views so that they almost compose in a certain way. We think about composition in terms of maybe a 2D rendering of something, but this is the way to think about that 2D rendering happening over time. So you have this piece of data and, boom, you place that here. Now how does it look for the rest of the pieces to be loading or if they fail, what does that look like and composing that over time? I think that's the problem that React is solving for us with Suspense.Taylor Bell: Cool. And so if a developer asked, "How does learning this help me," what would you say?Michael Chan: I think that we've had to deal with this problem for a really long time. So having different pieces of data coming from different end points, some being slow, some being fast and trying to make those all work together and look cohesive without overwhelming a page with spinners is something that we've had to do, but it's been pretty difficult. We've had to own a lot of that implementation and maybe it's very view specific so we have to do that on every page. And the new Suspense APIs allow us to abstract more of that away and make some more of that reusable in the same way that components and hooks kind of give us a way to make certain pieces of UI reusable. This is more like a composition tool for being able to extract even more of those kind of a loading states into reusable pieces.Taylor Bell: Cool. So can you walk me through the journey that the learner will take in your course?Michael Chan: So I try to cover every single step that we will go through in Suspense. So we start with something that you can absolutely use in React code today, so not experimental at all, which is just code splitting on components. And through that we introduce concept of Suspense, and error boundaries, and how to use them, and what do they mean and talking about how we're connecting our promises to Suspense boundaries and errors. And from there we just kind of build sequentially on each of those topics to say, "Okay, well now if we have this type of situation where we have used two pieces of data, one of them's slow, one of them's fast, how do we control which one shows up first? How do we control when the spinner shows up for the second one in relationship to the first [inaudible 00:03:08]?" And we just kind of want to go through each of those scenarios and just try to explore what it would look like from a code design standpoint to make each of these views behave the way that a user might expect.Taylor Bell: Cool. And so after somebody's gone through all the material, what do you suggest they do next? How can they apply Suspense to their real life?Michael Chan: I think that's a really good question because all of this stuff is experimental, as the React team says, I think that it is good to know. I think it's good to know how the future fits into your application and kind of start looking at some of those things. But this is really something that we're sorting out as a community so getting involved in kind of raising your pain points, if you're a library creator, exploring these APIs and creating some libraries that people can use to connect to data, whether that be a rest endpoint or a graph QL endpoint or anything like that. Just kind of solving your problem and seeing how that goes and how the APIs work for you is going to be critical information for the final form of these APIs.Taylor Bell: Cool. Well, thanks so much for joining me and I'm excited to check out your course.Michael Chan: Yeah, thanks for making all this happen. I'm super excited to work with you and others and learn these cool new features.

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

build-an-app-with-suspense-hooks-and-context-resources-cheatsheet

Cheat sheets

Sketch Notes

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

Michael Chan

What you'll learn:

Prerequisites:

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use