What is React Suspense? (including Suspense for Data Fetching)
In this video, we will learn what is React Suspense, how to use it with React.lazy() and how to use it for data fetching. We are also going to build a small app for fetching posts that will make use of Suspense for data fetching and we create a "skeleton screen" as a fallback.
Suspense was added to React in version 16.6 and it was initially used for lazy loading with React.lazy(). However, its potential was much higher. The React team realized that Suspense could be theoretically used for data fetching aswell, especially because of React Fiber and the Concurent Mode. Sadly, this turned out to be much more complicated. Although Suspense for data fetching still isn't part of the stable release, it looks like it may finally be added in React 18.x. More importantly, we can play around with it using the experimental release of React and that is what we are going to do.
Suspense with React.lazy():
https://codesandbox.io/s/cdsox
https://github.com/philipfabianek/sus...
Suspense for Data Fetching:
https://codesandbox.io/s/u9qq7
https://github.com/philipfabianek/sus...
My Video about React Fiber:
• What Is React Fiber? React.js Deep Dive #2
Timestamps:
0:00 What is React Suspense?
0:41 Suspense with React.lazy()
1:58 Suspense for Data Fetching
3:35 Creating App with Suspense for Data Fetching
6:42 Styling the App
7:36 Skeleton Screen
9:16 Animating Skeleton Screen
11:25 Adding User
12:28 Ending
Social Media:
►Twitter: / philip_fabianek
►LinkedIn: / philip-fabianek
►Website: http://www.philipfabianek.com
►GitHub: https://github.com/philipfabianek
Music:
Markvard | Reflections
• Reflections – Markvard (No Copyright Music)
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
MusicbyAden | Desire
• Desire – MusicbyAden (No Copyright Music)
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0
Nomyn | Flow
• Flow – Nomyn (No Copyright Music)
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
#ReactJS #ReactDeepDive