Skip to main content
黯羽轻扬Keep Growing Daily

React 16 Roadmap

Free2019-05-19#Front-End#React16 overview#React learning Roadmap#React新特性#React学习路线

Concurrent Mode, Hooks, Suspense, Modernizing React DOM

1. Overview

From a functionality perspective, React 16 roadmap has 4 key features:

  • Concurrent Mode

  • Hooks

  • Suspense

    • for Code Splitting

    • for Data Fetching

    • for SSR

  • Modernizing React DOM

Among them, Concurrent Mode (previously called Async Rendering) is undoubtedly the most anticipated thing, may lead transformation (cooperative scheduling mechanism may generalize to become browser capability)

From form perspective alone, Hooks is enhancement to function components, enabling them to sit at same table as Class components, even (expected) replace them. Substantial significance lies in further introducing more functional thinking into frontend field, such as Effect, Monad, etc. Considered as further exploration on this path after proposing v = f(d) UI layer functional thinking

Suspense has already appeared in Code Splitting scenario, main contribution lies in user experience and developer experience. Data Fetching scenario is similar, while improving developer experience (unifying data request and caching methods), also considering user experience (showing Loading). While Suspense capability in SSR scenario is different from previous two, considering more about balance between page loading performance and user experience, expecting through cooperation between server-side rendering and client-side rendering (Hydration), let page reach truly usable state as soon as possible

Modernizing React DOM is a refactoring plan targeting React DOM's (6 years) legacy issues, codename React Fire, aiming to simplify implementation and align with modern browser DOM mechanisms, such as removing event system this unnecessary abstraction layer, because these 2013 polyfills are no longer needed in modern browser environment

2. Concurrent Mode

Concurrent Mode means non-blocking rendering:

Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread.

P.S. Concurrent Mode was previously called async mode, name change is to highlight difference from other asynchronous rendering technologies, has priority scheduling concept, similar to time-sharing operating system's ability to concurrently execute multiple programs

For compute-intensive (CPU-bound) tasks, Concurrent Mode's brought non-blocking rendering capability, can guarantee application's interaction response capability while rendering large component trees (not freezing), is a very big piece in React's vision

Specifically, Concurrent Mode allows interrupting time-consuming rendering processes, giving main thread opportunity to free up and handle higher priority things:

It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a high-priority event (for example, text input or hover).

Can also cooperate with Suspense to skip unnecessary Loading states (if network is fast enough, no need to flash a Loading):

Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.

Furthermore, cooperative scheduling mechanism that Concurrent Mode feature depends on, may be provided by browser with native implementation in future (already working with Chrome team)

P.S. For more information about scheduler, see cooperative scheduling

Release Version

React & React DOM 16.x (unreleased)

Official Materials

3. Hooks

Hooks let function components also have state, lifecycle and other Class component features (such as state, lifecycle, context, ref, etc.):

Hooks let you use features like state and lifecycle from function components.

Additionally, also provides a capability for cross-component state logic reuse, no need to be strongly coupled with component tree structure nesting relationship:

Hooks let you use features like state and lifecycle from function components. They also let you reuse stateful logic between components without introducing extra nesting in your tree.

For example:

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

This is function component's "state", context, ref, component instance variables etc. all provided support through similar Hook methods, therefore function components have almost same expressiveness as Class components

Further, Hooks are given high expectations, expected to become basic form of React components (as Class component alternative option):

In the longer term, we expect Hooks to be the primary way people write React components. Our goal is for Hooks to cover all use cases for classes as soon as possible.

But, going through great trouble to enhance function components is not just for having one more option, main functions lie in:

  • Reducing component tree nesting levels

  • Reusing lifecycle logic (function components + Hooks extract parts that Class components cannot reuse at class (component) instance level)

Benefits reflected in 2 aspects:

  • Developer experience

    • Solving component nesting wrapper hell problem ("wrapper hell" of render props and higher-order components)

    • Reusing duplicate logic in lifecycle

  • Infrastructure

    • Solving obstacles in large-scale optimization (such as inline component compilation difficulties)

P.S. Note, proposing Hooks is not to deprecate Class, but after Hooks widespread application, may split Class support into separate package, to reduce bundle size:

Hooks don't deprecate classes. However, if Hooks are successful, it is possible that in a future major release class support might move to a separate package, reducing the default bundle size of React.

Release Version

React & React DOM v16.8.0

Official Materials

4. Suspense

Suspense is letting UI hang waiting for something else, basic mechanism is suspending rendering and showing a fallback:

Suspense refers to React's new ability to "suspend" rendering while components are waiting for something, and display a loading indicator.

2 goals:

  • Provide a convenient programming model for Code Splitting, Data Fetching and other scenarios

  • Promote user experience in concurrent mode

Our longer term vision for Suspense involves letting it handle data fetching too (and integrate with libraries like Apollo). In addition to a convenient programming model, Suspense also provides better user experience in Concurrent Mode.

Suspense for Code Splitting

Through React.lazy lazy loading components, thus achieving component (tree) granularity code splitting. For example:

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

P.S. For more information about React code splitting, see React Suspense

Release Version

React & React DOM v16.6.0

Official Materials

Suspense for Data Fetching

Similar to Code Splitting, also hopes to provide a convenient general solution for data request scenarios:

We'd like to provide officially supported ways to use it for data fetching too.

For example letting UI wait for data to come back, during this period showing Loading through React.Suspense:

// React Cache for simple data fetching (not final API)
import {unstable_createResource} from 'react-cache';

// Tell React Cache how to fetch your data
const TodoResource = unstable_createResource(fetchTodo);

function Todo(props) {
  // Suspends until the data is in the cache
  const todo = TodoResource.read(props.id);
  return <li>{todo.title}</li>;
}

function App() {
  return (
    // Same Suspense component you already use for code splitting
    // would be able to handle data fetching too.
    <React.Suspense fallback={<Spinner />}>
      <ul>
        {/* Siblings fetch in parallel */}
        <Todo id="1" />
        <Todo id="2" />
      </ul>
    </React.Suspense>
  );
}

Ultimate vision is for network libraries to provide upper layer encapsulation, letting most data requests go through Suspense

react-cache

react-cache provides experimental implementation for Suspense for Data Fetching vision

Currently still in very unstable stage (even lacking basic features like cache expiration), temporarily not recommended to use. Main reasons lie in:

  • Some underlying APIs depended on are not yet ready (see Context.write), causing API cannot be finalized

  • Lacking some UI mode support (such as component tree level-independent Loading)

But eventually will form a specification, other network libraries (such as Apollo) can follow specification description to integrate Suspense support:

We'll provide a reference implementation of a basic "React Cache" that's compatible with Suspense, but you can also write your own. Data fetching libraries like Apollo and Relay will be able to integrate with Suspense by following a simple specification that we'll document.

Release Version

React & React DOM 16.x (unreleased)

Official Materials

Suspense for Server Rendering

Suspense can also cooperate with SSR, front-end and back-end combined to improve page loading experience

Specifically, progressively loading, and rendering page content in chunks, simultaneously combining Suspense feature to improve visual experience during loading:

We started designing a new server renderer that supports Suspense (including waiting for asynchronous data on the server without double rendering) and progressively loading and hydrating page content in chunks for best user experience.

P.S. Among them double rendering refers to when front-end and back-end rendering results are inconsistent (such as front-end rendering depending on data requests), to guarantee state consistency, need to discard back-end rendering result, front-end re-renders the component, specifically see Hydration

Currently related information is very scarce, but confirmed SSR major refactoring is 2019's key goal:

The new server renderer is going to be our major focus in 2019, but it's too early to say anything about its release schedule.

Release Version

Uncertain

Official Materials

5. Modernizing React DOM

Plan named React Fire, wants to simplify implementation (Simplifying) and align with modern browser DOM (Modernizing)

Currently still in exploration stage, specific plan and progress see React Fire: Modernizing React DOM

Release Version

Uncertain

Official Materials

Reference Materials

Comments

No comments yet. Be the first to share your thoughts.

Leave a comment