React logo

React 16.6 new features: contextType, lazy, memo

In Oct 24, 2018, React 16.6.0 was published to npm. It brings a lot of exciting new features, including contextType, React.lazy() and React.memo(). We will discuss in depths of what they are and how will they change your React ecosystem.

In this blog post, I am going to assume that you already have certain experience with React, and have been working with React for a little while (mainly for understanding the tremendous advantages that the new features will bring us.

contextType

In React 16.3, Facebook released context API officially, shaking the foundation of state management systems like redux, mobx. In React 16.6, context API is further improved by introducing static contextType.

const SampleContext = React.createContext();


class WithContextAPIComponent extends React.Component {
  render() {
    return (
      <SampleContext.Consumer>
        {(value) => (<div>value.name</div>)}
      </SampleContext.Consumer>
    );
  }
}


class WithContextTypeComponent extends React.Component {
  static contextType = SampleContext;
  
  render() {
    const value = this.context;
    
    return (<div>value.name</div>);
  }
}


// usage
<SampleContext.Provider value={{ name: 'Tuan Nguyen' }}>
  <WithContextAPIComponent />
  <WithContextTypeComponent />
</SampleContext.Provider>

With the sample above, we can see that with contextType, we bound the context value to the component itself, which simplifies one layer of nested component to be rendered. This suddenly looks like it is so much similar to how we use redux store!!!

 

React.memo()

This is very simple. It enables the same functionality of React.PureComponent for functional components.

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

Previously functional components will re-render every time its props change, regardless of value.

With React.memo(), now functional components will shallowly check whether props values have changed, and decide to re-render.

React.lazy()

In my opinion, this is the most outstanding feature that React 16.6 offers.

Short description: it allows React components to only be downloaded from server on demand.

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

In the example, MyComponent will download OtherComponent only when it is needed.

This is very useful in tabular structure, where most users do not browse every tab content.

 

For more information, let’s check out the changelog at https://reactjs.org/blog/2018/10/23/react-v-16-6.html

One thought to “React 16.6 new features: contextType, lazy, memo”

  1. Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at tuannguyen.tech promoted as a resource on our blog alychidesign.com ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    .
    If you may be interested please in being included as a resource on our blog, please let me know.

    Thanks,
    Aly

Leave a Reply

Your email address will not be published. Required fields are marked *