 Courses from Michael Chan

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force specific data into your database.

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

The course will kick off by taking the default Next.js page and turning it into a Story. You will then learn how to leverage Story `Args`, configure the `next/image` component to be unoptimized, and mock server workers with MSW inside Storybook.

Next.js is a minimalistic framework for server-rendered React applications.

Integrate Storybook in a Next.js Application

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





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

Build an App with React Suspense

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Vim Videos for Beginners

Practical, repeatable CSS for application development.

Cascading Style Sheets bring order and beauty to our applications.

Styling

Migrate a Client-Side Application to React 18 Beta

Extracting new function components in React applications is something we do several times a day.
This video illustrates how to use errors to focusing your component extractions and component refactoring.

Extract a Function Component in React

Want to explore new features in React, play with cutting packages like react-cache, or contribute to core?
You need to know how to build React from source.

If you work in node a lot, this process should feel pretty familiar — with a couple additional complications.

By the end of this video you'll be building React packages like a pro.



Build React from Source

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.

Michael Chan

Search Results