Key Takeaways from React 16

React v16 has finally been officially released. The introduction on the official blog is already quite thorough (and aesthetically pleasing). This post serves as notes and a summary, condensing some of the details.

1. componentDidPatch(error, info)

The standout feature of React 16 is the addition of Error Boundary functionality, ensuring that errors during lifecycle methods don’t break the entire component. Previously, an error during render would cause the entire component to disappear.

An error is passed to componentDidPatch only when it is thrown in a lifecycle method, so throwing an error in places like the constructor will not be caught by componentDidCatch.

componentDidCatch takes two arguments: error and info. You can handle errors inside componentDidCatch by displaying a fallback UI, calling third-party services to log errors, and more.

class Post extends Component {
  constructor() {
    throw new Error("oops") // 不會傳入 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 example above, you can also wrap componentDidCatch using higher-order component techniques, or set up an ErrorBoundary component to handle errors from child components in a unified way.

2. Text-Only component

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

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

*3. ReactDOM.createPortal(component, dom)

createPortal is also one of my favorite new features. It allows you to render into a different DOM node from within the component tree, completely detached from the children, like the structure below:

<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 App not only offers better readability (without resorting to callbacks or direct DOM manipulation), but also allows you to manipulate nodes outside of the component’s children. This is extremely convenient for components like modals that might require an overlay (as overlays are often easier to manage when placed at the root node).

4. Custom Attributes

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

5. prevent update

Returning null in setState will no longer trigger an update (previous versions did). Moving forward, if you don’t want to re-render a component, you can simply pass null.

6. SSR Support

For more details, check out What’s new with serverside rendering in react16. Notably, React 16 SSR now supports streaming—renderToNodeStream(Component) returns a stream.

Also, as the author of that article mentioned:

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

Conclusion

These are the primary updates in React 16. The official blog provides a more comprehensive overview.