Reselect: Retaining memoization when passing props to *different* component instances.

[Palisand]

The docs state that in order to share a selector across multiple component instances while passing in props and retaining memoization, each instance of the component needs its own private copy of the selector. Does this apply to instances of different components using the same selector?

selectors.js

import {createSelector} from 'reselect';
getData = (state, props) => state.data[props.id];
// additional question: is reselect worth using for such a simple selector?
export const getDataForId = createSelector(getData, data => data);

foo.js

import {getDataForId} from './selectors';
const mapStateToProps = (state, props) => ({
  dataForId: getDataForId(state, props),
});
class Foo extends Component {...}
export default connect(mapStateToProps)(Foo);

bar.js

import {getDataForId} from './selectors';
const mapStateToProps = (state, props) => ({
  dataForId: getDataForId(state, props), // uses same selector as Foo
});
class Bar extends Component {...}
export default connect(mapStateToProps)(Bar);

index.js

...
<Foo />
<Bar />
...

[markerikson]

Yes, it does - see my post Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance for examples.

[crobinson42]

I wish I found that article 💯 sooner! ⬆️