React 16.x roadmap released with expected timeline for features like “Hooks”, “Suspense”, and “Concurrent Rendering”

Yesterday, the React team published a roadmap for React 16.x releases. They have split the rollout of new React features into different milestones. The team has made it clear that they have a single vision for how all of these features fit together, but are releasing each part as soon as it is ready, for users to start testing them sooner.

The expected milestone

React 16.6: Suspense for Code Splitting (already shipped)

This new feature can “suspend” rendering while components are waiting for something, and display a loading indicator. It is a convenient programming model that provides better user experience in Concurrent Mode  In React 16.6, Suspense for code splitting supports only one use case: lazy loading components with React.lazy() and <React.Suspense>.

React 16.7: React Hooks (~Q1 2019)

React Hooks allows users access to features like state and lifecycle from function components. They also let developers reuse stateful logic between components without introducing extra nesting in a tree. Hooks are only available in the 16.7 alpha versions of React. Some of their API is expected to change in the final 16.7 version. Hooks class support might possibly move to a separate package, reducing the default bundle size of React, in future releases.

React 16.8: Concurrent Mode (~Q2 2019)

Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render to handle a high-priority event. Concurrent Mode was previously referred to as “async mode”. A name change happened to highlight React’s ability to perform work on different priority levels. This sets it apart from other approaches to async rendering.

As of now, the team doesn’t expect many bugs in Concurrent Mode, but states that components that produce warnings in <React.StrictMode> may not work correctly. They plan to publish more guidance about diagnosing and fixing issues as part of the 16.8 release documentation.

React 16.9: Suspense for Data Fetching (~mid 2019)

In the already shipped React 16.6, the only supported use case for Suspense is code splitting. In the future 16.9 release, React will officially support ways to use Suspense for data fetching. The team will provide a reference implementation of a basic “React Cache” that’s compatible with Suspense. Data fetching libraries like Apollo and Relay will be able to integrate with Suspense by following a simple specification. The team  expects this feature to be adopted incrementally, and through layers like Apollo or Relay rather than directly.

They also plan to complete two more projects Modernizing React DOM and Suspense for Server Rendering  in 2019. As these projects require more exploration, they aren’t tied to a particular release as of now.

For more information, visit the React blog.

React Conf 2018 highlights: Hooks, Concurrent React, and more

React introduces Hooks, a JavaScript function to allow using React without classes

React 16.6.0 releases with a new way of code splitting, and more!