React Suspense

Articles & Tutorials

The future of React, unfolding with Suspense (
Jun 11, 2019
This won’t be just another article on how to write Hooks, but rather what to expect in the future of React! If you have never heard of Hooks, or any other new API in React, this article will be a great start to get you excited about the future.
  • Lusan Das
React Suspense with the Fetch API (
Jun 05, 2019
Let’s reveal the magic behind the curtain that is React Suspense. For educational purposes, I’ll cover how I created this package.
  • Charles Stover
When to use React Suspense vs React Hooks (
Apr 15, 2019
React Suspense is to a Monad as Hooks are to Applicative Notation
  • Vitaliy Akimov
A <Router /> with Hooks and Suspense (
Feb 18, 2019
Navi is a new kind of router for React. It lets you declaratively map URLs to content, even when that content is asynchronous.
React Suspense with GraphQL (
Feb 08, 2019
Warning, the React docs say that Suspense does not yet support data loading, so in the future there may be breaking changes & better options available.
Magic of React Suspense with concurrent react and React.lazy API (
Feb 07, 2019
Let’s understand what this means and also get introduced to some of the new features coming to React, some of which have been released as part of the latest stable release and some of them are still in unstable mode and it’s quite possible that the implementation of the api might change over time.
  • Vivek Nayyar
React’s Experimental Suspense API Will Rock for Fallback UI During Data Fetches (
Feb 02, 2019
Most web applications built today receive data from an API. When fetching that data, we have to take certain situations into consideration where the data might not have been received. Perhaps it was a lost connection. Maybe it was the endpoint was changed. Who knows.
  • Kingsley Silas
Lazy Loading React Components (with react.lazy and suspense) (
Jan 31, 2019
Let’s take a look at how you can leverage this feature in your application in order to improve performance and build a better experience for users.
  • Nwose Lotanna
React-cache, time slicing, and fetching with a synchronous API (
Jan 11, 2019
Well, this year seems to be the year of React. You’ve probably heard of the new killer feature that is coming with the 16.7 — Hooks
  • Marvin Frachet
React 16.x Roadmap (
Nov 27, 2018
You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.
How to use React.lazy and Suspense for components lazy loading (
Nov 14, 2018
React 16.6 brought code-splitting to a new level. You can now load your components when it’s really needed without installing additional libraries.
  • Boris Sever
React Conf recap: Hooks, Suspense, and Concurrent Rendering (
Nov 13, 2018
This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.
  • Tom Occhino
React Suspense: Async Rendering in React (
Sep 11, 2018
An Explanation of How and Why to Use React Suspense
  • Yomi Eluwande
Time slice and Suspense API – What’s coming in React 17? (
Jun 12, 2018
In this tutorial, we will explore what’s new in React 17 along with Time Slice and Suspense API.
Update on Async Rendering (
Mar 27, 2018
We’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.
Understanding React “Suspense” (
Mar 07, 2018
At the stage of last conference, Dan Abramov unveiled a new feature / API for React called React Suspense.
  • Bartosz Szczeciński
Revisiting use of React’s Component Life Cycle Hooks in Anticipation of Async Rendering (
Dec 09, 2017
If you’ve browsed the documentation, or kept an eye on the advice from the core React team, you’ve probably read that you shouldn’t handle subscriptions or side-effects in the constructor or componentWillMount.
  • Alex Brown

Video Guides & Talks

GraphQL + Suspense (
May 21, 2019
In this talk, Jared Palmer, Engineering Lead at The Palmer Group goes deep on the past, present, and future of data fetching in React apps.
React Suspense with CPU intensive background functions (
Jan 23, 2019
In this video we'll create a custom hook called useWorker which will execute CPU intensive code on a worker thread rather than the main browser thread... we'll make our hook "suspense friendly" with promises.
Custom fetch hook that works with React Suspense (
Jan 22, 2019
In this video we'll dive deep into suspense, creating a custom hooked called useFetchSuspense that will make an AJAX call with fetch, playing nicely with Suspense to handle showing the loading fallback component while the call is being asynchronously executed.
Intro to Suspense and React.lazy (
Jan 21, 2019
In this video we'll look at the smallest Suspense example I can think of :D It is part 1 of a 4 part series I'm doing on Suspense.
Suspense with @reach/router and React.lazy (
Jan 21, 2019
In this video we'll show how to use Suspense along with @reach/router and React.lazy to code-split and lazy-load each route/page of our application, showing a fallback component while it's loading.
Test components that use React.lazy + Suspense (
Dec 12, 2018
This was something I bumped into yesterday and thought I'd share how I test it.
Nested Suspense Issues (
Nov 20, 2018
It appears that the top level Suspense maxDuration is being applied while the nested fallback is taking place.
React... Suspense... (
Sep 26, 2018
Livestream of my talk @ SLC frontend meetup
Why React Is *Not* Reactive (
Aug 30, 2018
In this talk we build a Reactive React to show the difference between the "push" and "pull" paradigms of data flow and understand why React chooses to manage Scheduling as a core Design Principle, enabling awesome features like async rendering and Suspense!
Playing with React suspense and DevTools (
Jul 30, 2018
This was my first time live streaming. I apologize for the tiny font and for not seeing the messages in chat. I will do better next time! Here are some links to make up for it.
React Suspense (
Jun 12, 2018
React Suspense is one of the most highly anticipated API changes coming to the React world in 2018. It is one of the many new capabilities enabled by the React Fiber rewrite, and it focuses on solving core problems in async rendering that lead to tricky UI problems like cascading spinners.
React Suspense - Zeit Day 2018 (
May 28, 2018
Async rendering in React gives us a powerful new set of primitives for addressing longstanding problems in UI development. I'll discuss React's vision for how async rendering can improve data fetching, code delivery, prefetching, view transitions, and more.
Beyond React 16 - JSConf Iceland 2018 (
Apr 05, 2018
In this talk, Dan will share the React team’s vision for what the future of React might look like, including some never before seen prototypes.

Books & Guides

Reintroducing React (
May 02, 2019
Modern React with Every React Update Since v16 Demystified (includes advanced hooks)
  • Ohans Emmanuel

Podcast Episodes

Hasty Treat - React Suspense (
Mar 18, 2019
In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support and more!
React Suspense with Jared Palmer (
Mar 12, 2019
In this episode of React Round Up, Jared Palmer, Lead Engineer at Palmer Group, gives the listeners an overview of React Suspense, how it helps to resolve conflicts with resource scheduling and how it differs from current practices.
Hooks are Mixins with Ryan Florence (
Dec 04, 2018
Ryan Florence is the co-creator of React Router and creator of accessibility-first React libraries Reach Router and Reach UI. Chantastic sits with him to talk about Hooks on the night before they're announced. They talk about React's API growth, if Suspense has taken React to framework-land, what caches and resources mean for developers, and the rebirth of mixins as Hooks.
Don't Rewrite Your App for Hooks and Suspense with Jared Palmer (
Nov 20, 2018
Jared Palmer is a passionate JavaScript developer, pushing developer ergonomics in React with projects like formik and react-fns. Chantastic asks about what Suspense and Hooks mean for existing apps and what we should know to migrate our code sanely. They discuss why doing away with render props is a good thing, why Hooks are up to the task, and how Hooks and Suspense will impact libraries like formik, react-fns, and the-platform.
React Today and Tomorrow with the React Core Team (
Oct 31, 2018
The React core team sits down with Michael Jackson to discuss React today and tomorrow. They talk Concurrent Mode, Suspense, Hooks, the new profiler tab, scheduling in the browser, React Fire, React Fusion, becoming more framework-y, appearing less JavaScript-y, and why you shouldn’t worry about the second argument of useEffect.
Brian Vaughn, React Core Team (
Jun 04, 2018
We are joined by Brian Vaughn. Brian is on Facebook's Core React Team. He also contributes to a lot of open source products in the javascript space.
Async React with Andrew Clark (
Apr 10, 2018
Andrew Clark is a developer on the React core team at Facebook who has been working on asynchronous rendering. In this episode we do a deep dive on some of the decisions behind the implementation of async mode in React 16 as well as talk about how applications can benefit from using it.
React Drama with Michael Jackson (
Mar 13, 2018
We're joined by Michael Jackson, co-founder of React Training and creator of unpkg, to talk about some of the drama in the JavaScript world on the internet lately. We cover Dan Abramov's beyond React talk, Context and Suspense API, whether View Source matters, React Native Web, and of course Mootools.