React Pure Component And React.memo()

As we have established React is all about breaking down the UI into small components. Let’s suppose we have a parent component that renders multiple child components and the pros we provide to the child components are different from each other. But have you ever noticed that whenever you change the parent component state, it triggers the render method of all the child components, regardless of whether we are using the values in those components? Now the question arrives how do we stop that.

Worry no more React has an answer for you, comes React.PureComponent for class components and React.memo() for function components.

React.PureComponent

To make a component a pure component instead of extending the usual React.Component we go for React.PureComponent.

class PureComponent extends React.PureComponent {
  renderCounter = 0
  render() {
    this.renderCounter++
    return <h2>{this.props.name} rendered: {this.renderCounter}</h2>
  }
}

class ImpureComponent extends React.Component {
  renderCounter = 0

  render() {
    this.renderCounter++
    return <h2>{this.props.name} rendered: {this.renderCounter}</h2>
  }
}

class App extends React.Component {
  state = { 
    renderCounter: 1,
  }

  onButtonPress = () => {
    this.setState({ renderCounter: this.state.renderCounter + 1 })
  }

  render() {
    return (
      <div>
        <h1>Pure Component</h1>
        <h2>App rendered: {this.state.renderCounter}</h2>
        <ImpureComponent name="Impure Child Component" />
        <PureComponent name="Pure Child Component" />
        <button id="button" onClick={this.onButtonPress}>
          Trigger Render     
        </button>
      </div>
    )
  }
}

React.memo()

React.memo() works in the same way as the React.PureComponent but to make a functional component act like a React.PureComponent we go for React.memo. And the syntax is as below

const PureComponent = React.memo(props => {
    return return <h2>{this.props.name}</h2>
});

Note

The PureComponent and memo() use the default implementation of, shouldComponentUpdate() with a shallow prop and state comparison. So, a pure component is a component that only re-renders if props/state is different from the previous props and state.

In shallow comparison, primitive data-types like string, boolean, number are being compared by value and complex data-types like array, object, function are compared by reference.

In React.memo(), react gives us a feature which allows us to implement our own custom comparison function which will be the second argument in React.memo().

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);