Build an App with React Suspense

Overview

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!

Syllabus

Build an App with React Suspense: Intro and Setup
Import Components Lazily with Suspense React.lazy
Catch Errors with a React Error Boundary Component
Understand How React.lazy Communicates Loading Status to Suspense and Error Boundaries
Wrap Fetch Requests to Communicate Pending, Error and Success Status to React Suspense
Separate API Utility Functions from React Components
Track Async Requests with React's useState Hook
Enable Suspense Features with Experimental Concurrent Mode using ReactDOM.createRoot
De-prioritize NonUser-Blocking Updates with React useTransition's startTransition Function
Bypass Receded Views with React useTransition's timeoutMs Option
Display Loading States Conditionally with React.useTransition's isPending Boolean
Delay the Appearance of a Loading Spinner with CSS in React
Get Previous Resource Values with React’s useDeferredState Hook
Hoist React Component State
Avoid this Common Suspense Gotcha in by Reading Data From Components
Coordinate Fallback Rendering with the React SuspenseList Component
Reveal Suspense Components in Order with SuspenseList's revealOrder Prop in React
Avoid Too Many Spinners with React SuspenseList’s tail Prop
Pass React Components a useTransition-Wrapped, State-Setting, Callback
Augment React Resource JSON with Custom Properties
Extract Reusable React Components with an As Prop, Render Props, and React.Fragment
Connect a New Endpoints in a React Suspense App
Provide Suspensified Data to React Components with Context and useContext