02.pure-component.md

Using Pure Components

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}/>
})

ALSO GOOD

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}/>
  }
}
})

Reference:

• https://github.com/acdlite/recompose#composition
• https://facebook.github.io/react/docs/react-api.html#react.purecomponent