Watch screencast [en] / Watch talk [fr]
With React v16, the Facebook team shipped a new version of the core called “Fiber”. Thanks to this full rewrite, we’ve already seen new features like Fragments, Portals and ErrorBoundaries. Some other features are still under development:
- Suspense
- Time Slicing
For the last few months, engineers from facebook have made a few demonstrations of the possibilities of these features. Few examples are available (at the time of the writing, those are still unstable/undocumented APIs).
After the talk of Ryan Florence at React Rally presenting Suspense and how @reach/router is ready for it, I decided to make a little project:
- to dive into those new concepts
- to share code examples
- to expose a simple tool that could help explain the benefits of using suspense
What problems does Suspense solves ?
- It lets you start rendering before all data is ready (rendering can be paused when data starts loading and resumed when it finishes)
- It lets you avoid a cascade of spinners, that may cause flashes due to unintentional reflows and repaints
- Code splitting becomes a built-in feature, easy to use (you also can pause rendering while loading script)
What this means:
- Move the fetching of data closer to where it will be rendered – data encapsulation
- Get rid of loading states – cleaner state in components (maybe even stateless in some use cases – no more need of componentDidMount lifecycle hook to go fetch data)
- Finer grain control over spinners (thanks to
<Placeholder>)
How to test it today
Suspense is still under active development, be aware that the APIs might change and be unstable, though it’s advanced enough to hack a project with. You’ll need to make your own build of React.
Tophe
This was a short introduction to React Suspense, go further by watching the video and play online with topheman/react-fiber-experiments.
Resources:
2 thoughts on “Discover React Suspense”