React 16.0–16.3 new features for every day use

This is a short cheat sheet for developers migrating from React 15 to React 16, or from earlier 16.x versions to 16.3. It focuses on features you’ll use often.

Returning multiple elements from components with fragments

Splitting UI into small reusable components may lead to creation of unnecessary DOM elements, like when you need to return multiple elements from a component. React 16 has several options to avoid that:

// React 15: extra wrapper elementconst Breakfast = () => (  <ul>    <li>Coffee</li>    <li>Croissant</li>    <li>Marmalade</li>  </ul>);// React 16.0: array (note that keys are required)const Breakfast = () => [  <li key="coffee">Coffee</li>,  <li key="croissant">Croissant</li>,  <li key="marmalade">Marmalade</li>];// React 16.2: fragmentconst Breakfast = () => (  <React.Fragment>    <li>Coffee</li>    <li>Croissant</li>    <li>Marmalade</li>  </React.Fragment>);// React 16.2: fragment (short syntax)const Breakfast = () => (  <>    <li>Coffee</li>    <li>Croissant</li>    <li>Marmalade</li>  </>);// React 16: fragments compositionconst Meals = (  <ul>    <Breakfast />    <Lunch />    <Dinner />  </ul>);

Note that the short syntax may not be supported by the tools you’re using.

Returning strings and numbers from components

In React 16 components can return strings and numbers. This is useful for components that don’t need any markup, like internationalization or formatting:

// React 15const LocalDate = ({ date }) => (  <span>    {date.toLocaleDateString('de-DE', {      year: 'numeric',      month: 'long',      day: 'numeric'    })}  </span>);// React 16const LocalDate = ({ date }) =>  date.toLocaleDateString('de-DE', {    year: 'numeric',    month: 'long',    day: 'numeric'  });

Cancelling setState() to avoid rerendering

In React 15 it wasn’t possible to cancel setState() and avoid rerendering, if your next state was based on the previous state. In React 16 you could return null in setState()’s callback:

// React 16handleChange = event => {  const city = event.target.value;  this.setState(    prevState => (prevState.city !== city ? { city } : null)  );};

In this example calling handleChange() with the same city name as in the state won’t cause a rerender.

Updating state based on props with getDerivedStateFromProps

The getDerivedStateFromProps() lifecycle method is a replacement for componentWillReceiveProps(). It’s useful when you have a prop with a default value for a state property, but you want to reset the state when that prop changes. For example, a modal that has a prop that says if it’s initially open, and a state that says if a modal is open now:

// React 15class Modal extends React.Component {  state = {    isOpen: this.props.isOpen  };  componentWillReceiveProps(nextProps) {    if (nextProps.isOpen !== this.state.isOpen) {      this.setState({        isOpen: nextProps.isOpen      });    }  }}// React 16.3class Modal extends React.Component {  state = {};  static getDerivedStateFromProps(nextProps, prevState) {    if (nextProps.isOpen !== prevState.isOpen) {      return {        isOpen: nextProps.isOpen      };    }  }}

The getDerivedStateFromProps() method is called when a component is created and when it receives new props, so you don’t have to convert props to state twice (on initialization and in componentWillReceiveProps).

Other new features

React 16 has many other features that are useful in some cases:

• the new context API;
• error boundaries;
• portals;
• forwarding refs;
• getSnapshotBeforeUpdate() lifecycle method.

I also highly recommend Nik Graf’s course on React 16 at Egghead.

React 16.0–16.3 new features for every day use was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.