Redux Reselect

*to memoize state so that every time mapStateToProps is called it does not re-render components that do not need to be re-rendered

Install reselect

npm i reselect

Create selectors

hoge.selectors.js

import { createSelector } from 'reselect'

const selectHoge = (state) => state.hoge;

export const selectHogeBlah = createSelector(
    [selectHoge],
    (hoge) => hoge.blah
);

Use selectors

import { selectHogeBlah } from '.../hoge.selectors.js';

const mapStateToProps = (state) => ({
   hoge: selectHogeBlah(state);
})

import { selectHogeBlah } from '.../hoge.selectors.js';

const mapStateToProps = (state, props) => ({
   hoge: selectHogeBlah(props)(state);
})

import { createStructuredSelector }
import { selectHogeBlah } from '.../hoge.selectors.js';

const mapStateToProps = createStructuredSelector({
   hoge: selectHogeBlah(state);
})