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

TRY OUT

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)

(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: