As noted in the docs, if you are not careful, memoization can be undone when using a selector with props in multiple components.

The solution is to use a selector factory and pass that to mapStateToProps instead. This works well for one level deep selectors, however, if we are composing memoized selectors the same caveats apply. It is very easy to unintentionally undo the memoization as we nest. The solution again is to keep wrapping our sub-selectors in factories and executing them as we create the selectors.

A neater approach is to always accept either a selector or a selector factory in the createSelector function and handle it in a similar manner as react-redux connect does. This would allow us nest selector factories without having to explicitly execute the factory.

This change means the way selectors are used is identical whether they are

• Pure Functions
• Memoized Singletons
• Reusable Memoized Factories
• Composed from the above types
• Used directly in mapStateToProps

For example:

// moduleA.js
export somePureSelector = (state, props) => state.a + props.b;

// moduleB.js
export someMemoizedSelector = () => createSelector(
  (state) => state.a,
  (state, props) => props.b,
  (a, b) => a + b
);

// moduleC.js
export composedSelector = () => createStructuredSelector({
   a: somePureSelector,
   b: someMemoizedSelector
});

// ContainerA.js
export connect(somePureSelector)(SomeComponent);

// ContainerB.js
export connect(someMemoizedSelector)(SomeComponent);

// ContainerC.js
export connect(composedSelector)(SomeComponent);

I realize this PR is incomplete, I just wanted to get people's opinion on the change.