1. 4
    Understand How React.lazy Communicates Loading Status to Suspense and Error Boundaries
    2m 18s

Understand How React.lazy Communicates Loading Status to Suspense and Error Boundaries

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

Instructor: [0:00] Let's take a second and make sure that we understand what's going on between our promises, our promise wrappers, and Suspense and error boundary components.

[0:10] At the end of the day, import is just a fancy promise and promises can have three statuses -- pending, rejected and resolved. To prove that there's no magic, let's mock up all of these statuses manually. Duplicate and replace.

[0:34] Let's start with the rejected status. In place of our import, we'll just return a rejected promise. We can see the change in our browser and see that this renders the error boundary fallback. Displaying couldn't catch him all.

[0:54] Next is the pending status. For this, we return a new promise with a resolve function. Renews set timeout to simulate some type of one second network delay and call that resolve function when we're done. Format and save.

[1:15] We see that updated to loading Pokemon enacting our Suspense boundary fallback and displaying loading Pokemon.

[1:24] Finally, we have the resolved status. This is where the function is called that returns our module with our component definition. We can just fake it with a div that says fakePokemon. Format and save.

[1:42] Here, we see fakePokemon showing what happens when we get all of the data that we need. The latency is passed, and our module is resolved.

[1:52] I want to show you all this so that you can keep in mind how each of these promise statuses results in what's rendered. Pending will render the Suspense fallback. Rejected, the error boundary fallback. And resolved, the component that we meant to render all along. Understanding this will become critical as we write promise wrappers of our own to fetch data.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today