What's new in React?

This paragraph was written on August 14, 2018, and the latest version of React was 16.4.2. The React 16 version has a new core architecture named Fiber. 

In this recipe, we will see the most important updates in this version that you should be aware of to get the most out of React.

How to do it...

Let's see the new updates:

1. Components can now return arrays and strings from render: Before, React forced you to return an element wrapped with a <div> or any other tag; now it is possible to return an array or string directly:

    // Example 1: Returning an array of elements.
    render() {
      // Now you don't need to wrap list items in an extra element
return [
<likey="1">First item</li>,
<likey="2">Second item</li>,
<likey="3">Third item</li>,
      ];
    }

// Example 2: Returning a string
render() {
return 'Hello World!';
    }

2. Also, React now has a new feature called Fragment, which also works as a special wrapper for elements. It can be specified with empty tags (<></>) or directly using React.Fragment:

// Example 1: Using empty tags <></>
    render() {
return (
<>
          <ComponentA />
          <ComponentB />
          <ComponentC />
 </>
      );
    }

// Example 2: Using React.Fragment
render() {
return (
<React.Fragment>
<h1>An h1 heading</h1>
          Some text here.
 <h2>An h2 heading</h2>
          More text here.
          Even more text here.
</React.Fragment>
      );
    }

    // Example 3: Importing Fragment
import React, { Fragment } from 'react';
    ...
render() {
return (
 <Fragment>
<h1>An h1 heading</h1>
          Some text here.
<h2>An h2 heading</h2>
          More text here.
          Even more text here.
</Fragment>
      );
    }

3. Error boundaries with from the official website:

A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an "error boundary". Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info).

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);

        this.state = { 
hasError: false 
        };
      }

componentDidCatch(error, info) {
 // Display fallback UI
        this.setState({ 
hasError: true 
        });

// You can also log the error to an error reporting service
logErrorToMyService(error, info);
      }

render() {
if (this.state.hasError) {
 // You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
        }

return this.props.children;
      }
    }

// Then you can use it as a regular component:
render() {
   <ErrorBoundary>
        <MyComponent />
</ErrorBoundary>
    }

4. Better server-side rendering with from the official site:

React 16 includes a completely rewritten server renderer. It's really fast. It supports streaming, so you can start sending bytes to the client faster. And thanks to a new packaging strategy that compiles away process.env checks (Believe it or not, reading process.env in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.

5. Reduced file size with from the official site: "Despite all these additions, React 16 is actually smaller compared to 15.6.1.
   • react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped)
   • react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped)
   • react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped)

That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip)."

 

Note

If you want to check the latest updates on React, you can visit the official React blog: https://reactjs.org/blog.