React Suspense

Articles & Tutorials

Lazy-Loading Your React App (telerik.com)
Nov 04, 2020
Improve the performance of your React app with React.lazy and Suspense.
  • Blanca Mendizábal Perelló
Render as you fetch (with and without suspense) (epicreact.dev)
Sep 21, 2020
React Suspense for Data Fetching is an experimental feature in React that opens the doors to a lot of really awesome performance improvements as well as developer experience improvements thanks to the declarative APIs given around asynchrony.
How to improve developer experience with React Suspense in Concurrent Mode (blog.logrocket.com)
May 22, 2020
This article describes what React Suspense in Concurrent Mode means in terms of developer experience. We will see how traditional Data Fetching in Legacy Mode can be done in Concurrent Mode.
  • Daishi Kato
Use React.Suspense to wait for an image to load (sergiodxa.com)
May 09, 2020
Learn how to use React.Suspense to handle the loading state of an image.
  • Sergio Xalambrí
React Suspense in Practice (css-tricks.com)
Mar 19, 2020
This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We'll look at how to integrate routing and data loading with Suspense in React.
  • Adam Rackis
Using Suspense with react-query (blog.logrocket.com)
Jan 07, 2020
In this article, we’ll look at using the react-query library alongside Suspense by building a simple recipe app that fetches recipe data from an API and renders it to the DOM.
  • Abdulazeez Abdulazeez Adeshina
Trim the Fat From Your Bundles Using Webpack Analyzer & React Lazy/Suspense (itnext.io)
Dec 26, 2019
In this post I will go over a real world example from my work at Wix where I was able to trim my bundle size by about 80% using Webpack Analyzer and React Lazy/Suspense.
Can you feel the Suspense?! (react.christmas)
Dec 05, 2019
Suspense is and will become a game changer when it comes to data fetching. It changes the way we structure our code, think about loading states and gives a better experience for both the developers and the users' interface.
  • Julie Hill Roa
Oh, the Suspense! (react.christmas)
Dec 04, 2019
So, let’s get excited and learn about React.Suspense and how this helps us wait for something uncertain!
  • Julie Hill Roa
Experimental React: Using Suspense for data fetching (blog.logrocket.com)
Nov 29, 2019
If you’re a React developer, by now you’ve most likely heard of Concurrent Mode. If you’re still wondering what that is, you’re in the right place.
  • Ovie Okeh
Suspense Explained (adamrackis.dev)
Nov 14, 2019
This post is my attempt at explaining what problems it solves, with what primitives, which I’ll take you through step by step, showing what they do, and how they’re employed.
  • Adam Rackis
Towards a Gatsby+Suspense proof-of-concept (swizec.com)
Nov 11, 2019
Messing around with React Suspense gave me a great idea: What if you could fallback to preloaded data instead of a loading spinner?
Catch Your Suspense Errors (dev.to)
Oct 30, 2019
Not every promise resolves. Some are rejected. So, when we use React.Suspense to show loading and loaded states, we need to consider exceptions as well.
The future of React, unfolding with Suspense (blog.logrocket.com)
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 (dev.to)
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 (medium.freecodecamp.org)
Apr 15, 2019
React Suspense is to a Monad as Hooks are to Applicative Notation
  • Vitaliy Akimov
A <Router /> with Hooks and Suspense (frontarm.com)
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 (medium.com)
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 (hackernoon.com)
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 (css-tricks.com)
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) (blog.bitsrc.io)
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 (medium.freecodecamp.org)
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 (reactjs.org)
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 (medium.freecodecamp.org)
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 (reactjs.org)
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 (blog.logrocket.com)
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? (blog.pusher.com)
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 (reactjs.org)
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” (medium.com)
Mar 07, 2018
At the stage of last JSConf.is 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 (medium.freecodecamp.org)
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

Concurrent React from Scratch (youtube.com)
May 15, 2020
In this talk, we’ll create an effective mental model of Concurrent React by building a tiny clone of React! We will start with a blank js file and learn about how React renders components, schedules Time-Slicing updates with a Work Loop, add Hooks, and end off with a mini-clone of Suspense!
React Suspense Introduction (Data Fetching) (youtube.com)
Nov 22, 2019
In this video we're just going to experiment with React Suspense data fetching. Suspense is still an EXPERIMENTAL FEATURE at this time.
React Suspense Introduction (Data Fetching) (youtube.com)
Nov 22, 2019
In this video we're just going to experiment with React Suspense data fetching.
How does React Suspense Work? (youtube.com)
Nov 03, 2019
Doing a deep dive into how exactly React Suspense works. It's pretty clever how React Suspense works!
  • Harry Wolff
First Look at React Suspense List (youtube.com)
Oct 31, 2019
Learn how to use Suspense List in React.
React Suspense Error Handling and Post Requests (youtube.com)
Oct 29, 2019
Learn how to fetch new data, handle errors, and do post request with Suspense in React.
First Look at React Suspense for Data Fetching (youtube.com)
Oct 28, 2019
Learn how you can use React Suspense for data fetching. It will simplify how you handle loading states in React.
GraphQL + Suspense (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
Dec 12, 2018
This was something I bumped into yesterday and thought I'd share how I test it.
Nested Suspense Issues (youtube.com)
Nov 20, 2018
It appears that the top level Suspense maxDuration is being applied while the nested fallback is taking place.
React... Suspense... (youtube.com)
Sep 26, 2018
Livestream of my talk @ SLC frontend meetup
Why React Is *Not* Reactive (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (leanpub.com)
May 02, 2019
Modern React with Every React Update Since v16 Demystified (includes advanced hooks)
  • Ohans Emmanuel

Courses & Video Series

Build an App with React Suspense (egghead.io)
Dec 13, 2019
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.
Use Suspense to Simplify Your Async UI (egghead.io)
Dec 05, 2019
In this workshop, you'll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

Podcast Episodes

Joe Savona on Relay and Data Fetching with Suspense (reactpodcast.com)
Nov 07, 2019
Joe Savona joins us to talk about avoiding waterfalls in your React code. Joe has spent the last year working with the React team in developing a relay-suspense integration for the new facebook.com.
Andrew Clark on Concurrent Mode (reactpodcast.com)
Oct 31, 2019
We chat about future features, prerelease channels, and how Suspense is preparing the way for others to bring cooperative concurrency to their libraries, applications, and frameworks.
The Suspense is Almost Over — A Pre-ReactConf Concurrent React Rundown with Swyx (reactpodcast.com)
Oct 22, 2019
This week is React Conf! And I suspect that Suspense and Concurrent Mode will have a good showing. So — in anticipation and excitement — I asked friend of the show, Swyx, to join me for a Suspense/Concurrent React rundown episode — covering everything you need to know so far and what we hope to see at this year's event.
Hasty Treat - React Suspense (syntax.fm)
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 (devchat.tv)
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 (reactpodcast.com)
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 (reactpodcast.com)
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 (reactpodcast.com)
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 (egghead.io)
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 (reactpodcast.com)
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 (shoptalkshow.com)
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.