Using Pure Components

July 11, 2018 ยท View on GitHub

Pure Components do shallow equality checks in shouldComponentUpdate by default. This is intended to prevent renders when neither props nor state have changed.

Recompose offers a Higher Order Component called pure for this purpose and React added React.PureComponent in v15.3.0.

Bad

export default (props, context) => {
  // ... do expensive compute on props ...
  return <SomeComponent {...props} />
}

Good

import { pure } from 'recompose';
// This won't be called when the props DONT change
export default pure((props, context) => {
  // ... do expensive compute on props ...
  return <SomeComponent someProp={props.someProp}/>
})

Better

// This is better mainly because it uses no external dependencies.
import { PureComponent } from 'react';

export default class Example extends PureComponent {
  // This won't re-render when the props DONT change
  render() {
    // ... do expensive compute on props ...
    return <SomeComponent someProp={props.someProp}/>
  }
}
})