React Suspense with the Fetch API

Dan Abramov, in response to a React developer asking why Suspense was not responding to the fetch API.
“No.”

Shut Up and Give Me the Package! 💰

If you’re just here for solutions, I don’t blame you. You can find fetch-suspense on NPM and the most extensive documentation of your life on the GitHub repository.

How Does Suspense Work? 🔮

A lot of the new React features are built into the React library, as opposed to being external packages, due to the performance benefits of being tightly coupled to the engine that powers React, known as React Fiber.

How Does This Apply to Fetch Hooks? 🎣

What you should have gathered by now is that the fetch hook will need to throw Promises. So it does. That promise is conveniently the fetch request. When Suspense receives that thrown fetch request, it falls back to rendering its fallback prop. When that fetch request completes, it attempts to render the component again.

Golly, How Do You Solve That Conundrum? 🤔

We solve it with memoization!

That Sounds Like a Memory Leak 💧

It can be a feature or a bug!

Conclusion 🍬

When Dan Abramov tells you that you can’t do something, you do it.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store