Time Slice and Suspense Features Coming to React.js
At a JavaScript conference in Iceland, JSConf 2018, Dan Abramov from the Facebook team announced two improvements, Time Slice and Suspense coming to React is in the near future. Originally slated in React 16.3 or the features might arrive later in 2018.
The work on the new features builds on the infrastructure revamp done in the Fiber rewrite that resulted in the React 16.0 release in September 2018. The release was a major one, but had few new features in APIs. The Focus was backwards compatibility, with new features rolling out in minor 16.x releases.
In addition React 16 was significant to the Open Source community as it was the first release that cleared patent worries, moving from the controversial BSD+Patents license to the very permissive MIT license. This decision was made after the Apache Foundation banned use of React made way for popular projects like WordPress and Drupal to adopt React.
Time Slice and Suspense improve CPU and IO performance
Early on in the development process of React 16.0 (AKA Fiber) there were discussions around asynchronous rendering. The underpinning of it were already available in the first releases of React 16, but Asynchronous rendering was kept off by default because of potential backwards compatibility issues.
Async rendering will enable faster response in UI rendering, but also introduces challenges for keeping track of changes in the UI as race conditions and similar hard-to-reason-about issues would appear. In addition there was a risk that the single threaded JavaScript would lead to unresponsive UIs.
This is where Time Slice comes into play as a method for making working with async rendering transparent for developers. This enhances UI responsiveness, especially on slower devices such as mobile phones - this is an area where heavy React User Interfaces can lead to a suboptimal user experience.
The beauty of Time Slice is that it handles all the difficult CPU scheduling tasks under the hood without developer considerations. For Suspense the case is different, it aims to help working with asynchronous IO operators like calling REST, Falcor or GraphQL APIs on the fly.
Slow IO calls on mobile networks can also lead to dodgy UI performance as requests, but what Suspense does is allows developers to reason about State Management in a similar manner as Git branches. A developer can work on multiple different features at once, and advance different brances as needed.
This idea is what Suspense does in the backend - completely transparent to the developer. In the process it also renders the Redux state management library obsolete for many use cases.
Beyond React 16 by Dan Abramov: Time Slice and Suspense
Both of Time Slice as well as as Suspense remain in active development and the APIs are unstable and will keep changing. To follow the development it is best to keep an eye on the Pull Requests for Suspense and Time Slice, e.g. [WIP] Suspense #12279
There is now a blog post on the React from Sophie Alpertsite detailing the Time Slice and Suspensee features: Sneak peek: Beyond React 16
In the meanwhile you can also watch the full presentation from Dan Abramov at JSConf 2018 detailing the reasoning behind the new CPU and I/O optimisations in his talk on Beyond React 16:
Tweet