# 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.

### The bad way

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

### The good way

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

### A better way

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

## Related links:

* [Recompose](https://github.com/acdlite/recompose#composition)
* [Higher Order Components with Functional Patterns Using Recompose](https://egghead.io/courses/higher-order-components-with-functional-patterns-using-recompose)
* [React: PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
* [Pure Components](https://www.fullstackreact.com/30-days-of-react/day-11/)
* [Top 5 Recompose HOCs](https://medium.com/@abhiaiyer/top-5-recompose-hocs-1a4c9cc4566)
