1
Build an App with React Suspense: Intro and Setup
8m 3s
2
Import Components Lazily with Suspense React.lazy
3m 49s
3
Catch Errors with a React Error Boundary Component
4m 59s
4
Understand How React.lazy Communicates Loading Status to Suspense and Error Boundaries
2m 18s
5
Wrap Fetch Requests to Communicate Pending, Error and Success Status to React Suspense
5m 41s
6
Separate API Utility Functions from React Components
1m 15s
7
Track Async Requests with React's useState Hook
2m 23s
8
Enable Suspense Features with Experimental Concurrent Mode using ReactDOM.createRoot
1m 23s
9
De-prioritize NonUser-Blocking Updates with React useTransition's startTransition Function
2m 2s
10
Bypass Receded Views with React useTransition's timeoutMs Option
2m 44s
11
Display Loading States Conditionally with React.useTransition's isPending Boolean
2m 45s
12
Delay the Appearance of a Loading Spinner with CSS in React
2m 54s
13
Get Previous Resource Values with React’s useDeferredState Hook
2m 34s
14
Hoist React Component State
4m 50s
15
Avoid this Common Suspense Gotcha in by Reading Data From Components
4m 3s
16
Coordinate Fallback Rendering with the React SuspenseList Component
4m 41s
17
Reveal Suspense Components in Order with SuspenseList's revealOrder Prop in React
1m 57s
18
Avoid Too Many Spinners with React SuspenseList’s tail Prop
1m 24s
19
Pass React Components a useTransition-Wrapped, State-Setting, Callback
3m 8s
20
Augment React Resource JSON with Custom Properties
2m 19s
21
Extract Reusable React Components with an As Prop, Render Props, and React.Fragment
7m 42s
22
Connect a New Endpoints in a React Suspense App
5m
23
Provide Suspensified Data to React Components with Context and useContext
5m 52s

Coordinate Fallback Rendering with the React SuspenseList Component

Reactexperimental

Share this video with your friends

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

Share this video with your friends

Course

Build an App with React Suspense