How to optimize the functional components using React.memo

How to optimize the functional components using React.memo

In React 16.6 we got more useful features one of them is React.memo function.

React.memo is a higher order function which is used to optimize the functional components by shallow comparing the props.

If your functional component is rendering the same data again and again passed by the props, if you pass that component as an argument to React.memo function, it prevents the re-rendering and reuse the last rendered data.

Let’s see an example

function MyComponent(props) {
  console.log(props);
  return (
    <div className="App">
      <button onClick={props.handleUnlike}>Unlike</button>:
      <button onClick={props.handleLike}>Like</button>
    </div>
  );
}

class App extends React.Component {
  state = {
    like: false
  };

  handleLike = () => {
    this.setState({
      like: true
    });
  };

  handleUnlike = () => {
    this.setState({
      like: false
    });
  };

  render() {
    return (
      <div>
        <MyComponent
          like={this.state.like}
          handleLike={this.handleLike}
          handleUnlike={this.handleUnlike}
        />
      </div>
    );
  }
}

In the above code, we defined two components and the functional component is wrapped inside the App component then we passed the props data to that component.

When we click on a like button or unlike button, the functional component is rendering again and again with the same data.

Let’s use the React.memo() function to prevent the re-rendering of a component.

function MyComponent(props) {
  console.log(props);
  return (
    <div className="App">
      <button onClick={props.handleUnlike}>Unlike</button>:
      <button onClick={props.handleLike}>Like</button>
    </div>
  );
}

const OptimizedComponent = React.memo(MyComponent);

class App extends React.Component {
  state = {
    like: false
  };

  handleLike = () => {
    this.setState({
      like: true
    });
  };

  handleUnlike = () => {
    this.setState({
      like: false
    });
  };

  render() {
    return (
      <div>
        <OptimizedComponent
          like={this.state.like}
          handleLike={this.handleLike}
          handleUnlike={this.handleUnlike}
        />
      </div>
    );
  }
}

We first passed our MyComponent as an argument to React.memo function then we get back an Optimized component.