Photo by on Artem Sapegin Unsplash This is a short cheat sheet for developers migrating from React 15 to React 16, or from earlier 16.x versions to 16.6. 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 and avoid rerendering, if your next state was based on the previous state. In React 16 you could return in ’s callback: setState() null setState() // React 16handleChange = event => {  const city = event.target.value;  this.setState(    prevState => (prevState.city !== city ? { city } : null)  );}; In this example calling with the same city name as in the state won’t cause a rerender. handleChange() Avoiding prop drilling with the official context API (16.3) 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. Prop drilling class Root extends React.Component {  state = { theme: THEME_DARK };  handleThemeToggle = theme =>    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 belowconst 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 we can access our theme props anywhere in the component tree: context API const ThemeContext = React.createContext(THEME_DARK);

// We should wrap our app in this componentclass ThemeProvider extends React.Component {  state = { theme: THEME_DARK };  handleThemeToggle = theme =>    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 treeconst Header = () => (  <ThemeContext.Consumer>    {({ theme, onThemeToggle }) => (      <header className={cx('header', `header--${theme}`)}>        ...        <button onClick={onThemeToggle}>Toggle theme</button>      </header>    )}  </ThemeContext.Consumer>); on CodeSandbox. Check out an example Updating state based on props with getDerivedStateFromProps() (16.3) The lifecycle method is a replacement for . 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: getDerivedStateFromProps() componentWillReceiveProps() // 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 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 ). getDerivedStateFromProps() componentWillReceiveProps() Rerendering function components on props change with React.memo() (16.6) does the same for function components as does for class components: only rerenders the component if its props change. React.memo() PureComponent const MyComponent = React.memo(props => {  /* Only rerenders if props change */}); Easier access to context in class components with contextType (16.6) simplifies access to the React context : Class.contextType 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>    );  }} Other new features React 16.x has many other useful features: ; error boundaries ; portals (16.3); forwarding refs (16.3); the new context API (16.3); getSnapshotBeforeUpdate() lifecycle method (16.3); StrictMode component (16.4); pointer events (16.5); profiler (16.6); React.lazy (16.6). static getDerivedStateFromError() I also highly recommend Nik Graf’s at Egghead. course on React 16 Subscribe to my newsletter: https://tinyletter.com/sapegin

Target

Read my new book on clean code

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React 16.0–16.6 new features for every day use

Too Long; Didn't Read

People Mentioned

Company Mentioned

Artem Sapegin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React 16.0–16.6 new features for every day use

Too Long; Didn't Read

People Mentioned

Company Mentioned

Artem Sapegin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES