Discover React Suspense

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)
  • 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:

One thought on “Discover React Suspense

Leave a Reply

Your email address will not be published. Required fields are marked *