> For the complete documentation index, see [llms.txt](https://christer-johansson.gitbook.io/learn-react-now/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://christer-johansson.gitbook.io/learn-react-now/perf-tips/03.reselect.md).

# Using reselect

Use Reselect in Redux connect(mapState) -- to avoid frequent re-render.

### The bad way

```javascript
let App = ({otherData, resolution}) => (
  <div>
    <DataContainer data={otherData}/>
    <ResolutionContainer resolution={resolution}/>
  </div>
);

const doubleRes = (size) => ({
  width: size.width * 2,
  height: size.height * 2
});

App = connect(state => {
  return {
    otherData: state.otherData,
    resolution: doubleRes(state.resolution)
  }
})(App);
```

In this above case every time otherData in the state changes both DataContainer and ResolutionContainer will be rendered even when the resolution in the state does not change. This is because the doubleRes function will always return a new resolution object with a new identity. If doubleRes is written with Reselect the issue goes away: Reselect memoizes the last result of the function and returns it when called until new arguments are passed to it.

### The good way

```javascript
import { createSelector } from 'reselect';
const doubleRes = createSelector(
  r => r.width,
  r => r.height,
  (width, height) => ({
    width: width * 2,
    height: height * 2
  })
);
```

## Related links:

* [React](https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.cz2ypc2ob)
* [Computing Derived Data: Docs](http://redux.js.org/docs/recipes/ComputingDerivedData.html)