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:
- 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).
- 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
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.
This was a short introduction to React Suspense, go further by watching the video and play online with topheman/react-fiber-experiments.
This post was originally posted on my blog.