Using reselect
Use Reselect in Redux connect(mapState) -- to avoid frequent re-render.
Bad
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.
Good
import { createSelector } from 'reselect';
const doubleRes = createSelector(
r => r.width,
r => r.height,
(width, height) => ({
width: width * 2,
height: height * 2
})
);