The context is a React app with reselect and redux, however my problem might just be 'pure' JS. My problem is that I can't understand why I can't reuse a selector.
I have a selector X. In addition, I have a makeGetX as follows:
const X = createSelector( [...], (// checks for a specific flag and manipulates)=> x );
const makeGetX = () => X;
Some of my components simply use X and some the maker. Before that I used to only have maker with the X definition:
const makeGetX = () => createSelector( [...], (// checks for a specific flag and manipulates)=> x );
The former worked great whenever the specific aforementioned feature was used. Refactoring it as shown in the first snippet breaks (infinite updates) it whenever I use the maker.
The context of use is I have multiple components using a makeMapStateToProps and within it
...
const getX = makeGetX()
...
return (state,ownProps) => ({..., X: getX(state, ownProps), ...});
And in my connect function I call makeMapStateToProps.
For now I solved it by duplicating the code :( in both definitions.
Would appreciate any insight or explanation. Thanks!
Well, I guess you are calling createSelector internally multiple times.
So it returns you different function objects which has a dedicated memo storage inside of it.
That's why shallow check fails (connect is doing simple shallow-equal check under the hood).