What’s next for React? Beyond React 16

Dan Abramov – of Redux fame – just spoke at JSConf Iceland 2018 previewing two new features that will make it in a future version of React.

The first demo shows time slicing, which can be translated to async rendering:

“We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update. We call this time slicing. If my device is fast enough, it feels almost like it’s synchronous; if my device is slow, the app still feels responsive.”

The second demo is for a feature called supsense, allowing components to suspend rendering until they’ve fecthed async data. The key concept to this new feature is fetchers, augmented with <Placeholder /> and <Loading /> components.

“You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic. On a fast network, updates appear very fluid and instantaneous without a jarring cascade of spinners that appear and disappear. On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written. The app stays responsive throughout.”

I especially like the <MovieDetails /> component where its rendering is suspended until the image is loaded.

Sneak Peek: Beyond React 16 →