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.

UPDATE 2018.03.03 Dan just tweeted out a series of Tweets on why suspense is better than an HOC for the use case it tackles:

(Click tweet to read the thread)

Sneak Peek: Beyond React 16 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.