A small demo app built to show the new features of React 16. Ideally it also shows why these new features allow you to create better applications.

Each page shows the same application, with the React 16 example taking advantage of new features to create a better user experience.

Here's a summary of the new features shown.

New core architecture
- Codenamed Fiber
- Unlocks many upcoming features, such as async rendering.

New render return types

Strings

Notice in the rendered DOM there are no longer any React specific comments of the form.

<!-- react-text: 8 -->
text in here
<!-- /react-text -->

Fragments

No need to wrap list items in an extra element. Instead of having to wrap items in an extra element you can just return an array.

render() {
    return [
        <li key="A">First item</li>,
        <li key="B">Second item</li>,
        <li key="C">Third item</li>,
    ];
}

React v16.2.0 brings improved support for fragments via a first-class Fragment component.
Means now you can write fragments like this.

render() {
    return (
        <Fragemnt>
            <li key="A">First item</li>
            <li key="B">Second item</li>
            <li key="C">Third item</li>
        </Fragment>
    );
}

Alternatively you can also use the JSX fragment syntax.

<>Item</>

Error Boundaries
- Catch runtime errors within a React component. Similar in behavior to try/catch, they allow you to gracefully recover from errors.
  Implemented via new lifecycle method componentDidCatch.
Portals
- First-class support for rendering children into a DOM node that exists outside the DOM hierarchy of the parent component.
  - Makes it easier to create Modal components.
Better server-side rendering
- Completely rewritten.
- Now supports streaming.
Support for custom DOM attributes
- Instead of ignoring unrecognized HTML and SVG attributes, React will now pass them through to the DOM.

React 15

React 16

Source

References