Learn fundamentals of React Suspense

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

Many components in your application will need data that has to be fetched over the network. When that data is loaded, however, you don't want to make a network request because you have the data stored in cache in the browser.

In this lesson, you will learn

  • throw a Promise
  • catch that Promise with Suspense
  • render that data to the browser after its loaded
  • add that data to cache
Vitaly Kondratiev
Vitaly Kondratiev
~ 2 years ago

Kent, could you please cover the negative scenario too? e.g. when promise rejects.

Kent C. Dodds
Kent C. Doddsinstructor
~ 2 years ago

That's a great suggestion. I'll make sure to cover that in the future.

For now, you just wrap it in an ErrorBoundary and that'll catch any errors the resource throws (resources should not typically attempt to handle the error gracefully)

Vitaly Kondratiev
Vitaly Kondratiev
~ 2 years ago

ErrorBoundary does help as well as wrapping a read operation in try / catch as an alternative. The problem arises if a user wants to retry fetch — that's where the issue is at the moment. Resource caches error responses and there is no way to invalidate itin the current version.

Kent C. Dodds
Kent C. Doddsinstructor
~ 2 years ago

I know that cache invalidation is something that react-cache will probably handle. We'll see what it's like when react-cache is stable :)

Halian Vilela
Halian Vilela
~ 2 years ago

So, I'm curious on what would be a production ready solution for the "double promise" issue and all the caveats you said...