React 16.0—16.9 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.9. 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 element
const Breakfast150 = () => (
  <ul>
    <li>Coffee</li>
    <li>Croissant</li>
    <li>Marmalade</li>
  </ul>
);
 
// React 16.0: array (note that keys are required)
const Breakfast160 = () => [
  <li key="coffee">Coffee</li>,
  <li key="croissant">Croissant</li>,
  <li key="marmalade">Marmalade</li>
];
 
// React 16.2: fragment
const Breakfast162Fragment = () => (
  <React.Fragment>
    <li>Coffee</li>
    <li>Croissant</li>
    <li>Marmalade</li>
  </React.Fragment>
);
 
// React 16.2: fragment (short syntax)
const Breakfast162FragmentShort = () => (
  <>
    <li>Coffee</li>
    <li>Croissant</li>
    <li>Marmalade</li>
  </>
);
 
// React 16: fragments composition
const Meals = (
  <ul>
    <Breakfast />
    <Lunch />
    <Dinner />
  </ul>
);

Note 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 15
const LocalDate150 = ({ date }) => (
  <span>
    {date.toLocaleDateString('de-DE', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })}
  </span>
);
 
// React 16
const LocalDate160 = ({ 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 16
handleChange = event => {
  const city = event.target.value;
  this.setState(prevState =>
    prevState.city === city ? null : { city }
  );
};

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

#Avoiding prop drilling with the official context API (16.3)

Prop drilling is when you’re passing some data to a deeply nested component using a prop, so you have to add this prop to each layer of your React component tree between a component that owns the data and a component that consumes it.

class Root extends React.Component {
  state = { theme: THEME_DARK };
  handleThemeToggle = () =>
    this.setState(({ theme }) => ({
      theme: theme === THEME_DARK ? THEME_LIGHT : THEME_DARK
    }));
  render() {
    return (
      <Page
        onThemeToggle={this.handleThemeToggle}
        {...this.state}
        {...this.props}
      />
    );
  }
}
 
// Each layer will have to pass theme and theme toggle handler props
<SomeOtherComponent
  onThemeToggle={props.onThemeToggle}
  theme={props.theme}
/>;
 
// Many layers below
const Header = ({ theme, onThemeToggle }) => (
  <header className={cx('header', `header--${theme}`)}>
    ...
    <button onClick={onThemeToggle}>Toggle theme</button>
  </header>
);

That’s a lot of boilerplate code! With the context API we can access our theme props anywhere in the component tree:

const ThemeContext = React.createContext(THEME_DARK);
 
// We should wrap our app in this component
class ThemeProvider extends React.Component {
  state = { theme: THEME_DARK };
  handleThemeToggle = () =>
    this.setState(({ theme }) => ({
      theme: theme === THEME_DARK ? THEME_LIGHT : THEME_DARK
    }));
  render() {
    return (
      <ThemeContext.Provider
        value={{
          onThemeToggle: this.handleThemeToggle,
          theme: this.state.theme
        }}
      >
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}
 
// And then use theme consumer anywhere in the component tree
const Header = () => (
  <ThemeContext.Consumer>
    {({ theme, onThemeToggle }) => (
      <header className={cx('header', `header--${theme}`)}>
        ...
        <button onClick={onThemeToggle}>Toggle theme</button>
      </header>
    )}
  </ThemeContext.Consumer>
);

Check out an example on CodeSandbox.

#Updating state based on props with getDerivedStateFromProps() (16.3)

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 15
class Modal150 extends React.Component {
  state = {
    isOpen: this.props.isOpen
  };
  componentWillReceiveProps(nextProps) {
    if (nextProps.isOpen !== this.state.isOpen) {
      this.setState({
        isOpen: nextProps.isOpen
      });
    }
  }
}
 
// React 16.3
class Modal163 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).

#Rerendering function components on props change with React.memo() (16.6)

React.memo() does the same for function components as PureComponent does for class components: only rerenders the component if its props change.

const MyComponent = React.memo(props => {
  /* Only rerenders if props change */
});

#Easier access to context in class components with contextType (16.6)

Class.contextType simplifies access to the React context in class components:

class App extends React.Component {
  static contextType = ThemeContext;
  componentDidMount() {
    const { theme } = this.context;
    /* ... */
  }
  componentDidUpdate() {
    const { theme } = this.context;
    /* ... */
  }
  componentWillUnmount() {
    const { theme } = this.context;
    /* ... */
  }
  render() {
    const { theme } = this.context;
    return (
      <h1>
        {theme === THEME_DARK
          ? 'Welcome to the dark side!'
          : 'Welcome to the light side!'}
      </h1>
    );
  }
}

#Using state in function components with hooks (16.8)

Hooks allows you to use state and other React features in function components. Often code with hooks is simpler than with classes.

For example, we can use state with the useState hook:

function Counter() {
  // A counter with the default value of 0
  const [count, setCount] = React.useState(0);
  return (
    <>
      <p>You’ve eaten {count} croissants.</p>
      <button onClick={() => setCount(count + 1)}>
        Eat a croissant!
      </button>
    </>
  );
}

Check out this example on CodeSandbox.

Other hooks are:

useEffect to manage side effects;
useContext to access React context;
useReducer to manage complex state;
useCallback to memoize functions;
useMemo to memoize values.
useRef to persist values between renders;
useImperativeHandle to forward imperative methods;
useLayoutEffect to manage side effects synchronously;
useDebugValue to debug custom hooks.

And you can create your own hooks to share logic between function components.

#Other new features

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

error boundaries;
portals;
forwarding refs (16.3);
getSnapshotBeforeUpdate() lifecycle method (16.3);
StrictMode component (16.3);
pointer events (16.4);
profiler (16.5);
React.lazy (16.6);
static getDerivedStateFromError() (16.6).
act() and async act() for testing (16.8 and 16.9).
component for performance measurements (16.9).

I also highly recommend Nik Graf’s course on React 16 and Kent C. Dodds’s course on hooks on Egghead.