Proposal: check that useSelector() returning a new object uses an equalityFn

[amcsi]

As per the docs here, if you pass a selector callback that returns a new object to useSelector() (e.g. useSelector(state => ({prop: state.someReducer.prop})), then the component will re-render on any state change in the entire store. Thus the docs suggest that you pass an equalityFn as the 2nd parameter to useSelector(); typically shallowEqual that is shipped with react-redux.

It would be cool if the eslint plugin provided a way to enforce this. My colleagues wrote a bunch of useSelector() calls with selectors returning new callbacks, without passing a 2nd argument (shallowEqual).

[ekilah]

I ran into this also, and came looking for a lint rule to help me keep our codebase compliant with the error we get (posting for searchability):

Selector returned a different result when called with the same parameters. This can lead to unnecessary rerenders. Selectors that return a new reference (such as an object or an array) should be memoized

However, to satisfy the problem the docs above talk about, I'd instead (or also) want the lint rule to suggest returning a single state value instead of many, like the docs talk about here and here. In other words, to ask them to repeat N useSelector calls instead of using one.