search

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.

hashtag
The bad way

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

hashtag
The good way

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

hashtag
A better way

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

hashtag
Related links:

PreviousshouldComponentUpdate() checkNextUsing reselect

Last updated