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.

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 [
        <li key="1">First item</li>,
        <li key="2">Second item</li>,
        <li key="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:

    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:

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)."