YoVDO

Build an App with React Suspense

Offered By: egghead.io

Tags

React Courses Web Development Courses React Suspense Courses

Course Description

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

Taught by

Michael Chan

Related Courses

30 Days to Learn Laravel
Laracasts
3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn
A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn
Accessibility Audit
Amazon Web Services via AWS Skill Builder
Expanding Your JS Skills with Angular
A Cloud Guru