React v16 has finally been officially released. The official blog provides a comprehensive and visually appealing introduction. This article serves as a summary and consolidation, focusing on key details.

1. componentDidPatch(error, info)

One of the most notable features in React 16 is the addition of ErrorBoundary, which ensures that errors during the component's lifecycle do not affect the entire component. Previously, if an error occurred during rendering, the entire component would disappear.

The componentDidCatch method only receives the error and info parameters when an error occurs in a lifecycle method. Therefore, throwing an error in places like the constructor will not be caught by componentDidCatch.

The componentDidCatch method takes two parameters: error and info. It can be used to handle errors, display fallback UI, or call third-party services to log errors, among other things.

class Post extends Component {
  constructor() {
    throw new Error("oops") // Will not be caught by componentDidCatch
  }

  componentWillMount() {
    this.setState(state => {
      throw new Error("oops")
      return {}
    })
  }
}
class App extends Component {
  constructor() {
    super(props)
    this.state = {
      post: { content: "" },
    }
  }

  updatePost = () => {
    this.setState(state => ({ ...state, post: null }))
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
    Logger.warn(error, info)
  }

  render() {
    return (
      <div>
        <Post post={this.state.post} />
      </div>
    )
  }
}

In addition to the above example, you can also use higher-order component techniques to wrap componentDidCatch or set up an ErrorBoundary component to handle errors in children uniformly.

2. Text-Only component

Unnecessary span and react-text nodes have been removed, and strings can now be directly returned.

const Text = ({ text }) => {
  return "pure string!"
}
class App extends Component {
  render() {
    return (
      <div>
        <Text /> // Renders 'pure string', rather than <span>pure string</span>
      </div>
    )
  }
}

*3. ReactDOM.createPortal(component, dom)

createPortal is another new feature that I really like. It allows rendering a component to a different DOM node within the component tree, completely independent of the children. For example, consider the following structure:

<div id="app1"></div>
<div id="app2"></div>

class App extends Component {
  constructor() {}

  render() {
    ;<div>
      <h2>Main header</h2>
      {ReactDOM.createPortal(<Sidebar />, document.querySelector("#app2"))}
    </div>
  }
}

Using ReactDOM.createPortal() inside the App component not only improves readability (avoiding the need for callbacks or direct DOM manipulation) but also allows manipulation of nodes outside the children. This is convenient for components like modals that may require overlays (which are usually better handled at the root node).

4. Custom Attributes

render() {
  return (
  	<div ui-prefix-scroller='foo'>
    </div>
  )
};

5. prevent update

Returning null in setState will not trigger an update (which was the case in previous versions). In the future, if you don't want to update a component, you can simply pass null.

6. SSR support

For more details, refer to What's new with server-side rendering in React 16. It's worth mentioning that React 16 SSR now supports streaming with the renderToNodeStream(Component) method.

The article's author also mentioned:

please, please, please make sure you always set NODE_ENV to production when using React SSR in production!

Conclusion

These are the main changes in React 16. The official blog provides a more detailed introduction.