example of the selector used in multiple component instances

I’m aware that this is a bug tracker and not a support system. But there is one place in the official documentation which puzzles me. I just wonder if react-redux team has decided to pick one implementation over another for a specific reason or else.

https://react-redux.js.org/next/api/hooks#useselector-examples

const makeNumOfTodosWithIsDoneSelector = () =>
  createSelector(
    state => state.todos,
    (_, isDone) => isDone,
    (todos, isDone) => todos.filter(todo => todo.isDone === isDone).length
  )

const selectNumOfTodosWithIsDone = useMemo(
    makeNumOfTodosWithIsDoneSelector,
    []
  )

  const numOfTodosWithIsDoneValue = useSelector(state =>
    selectNumOfTodosWithIsDone(state, isDone)
  )

Can I ask why the team decided to give this example instead of curried function and partial application?

const makeNumOfTodosWithIsDoneSelector = () => isDone =>
  createSelector(
    state => state.todos,
    todos => todos.filter(todo => todo.isDone === isDone).length
  )

const selectNumOfTodosWithIsDone = useMemo(
    makeNumOfTodosWithIsDoneSelector,
    []
  )

  const numOfTodosWithIsDoneValue = useSelector(selectNumOfTodosWithIsDone(isDone))
  )

Is there some performance/cache implications? Or it is just easier to read and understand for everyone who is reading this documentation?

[markerikson]

The main question is whether there are any other fields in state.profilePage.

If those are the only two fields, and you want to re-render when either of those change, then sure, select the entire object and destructure.

However, say there many more fields in state.profilePage, but your component only cares about those two. With state => state.profilePage, the component will re-render when the profilePage object itself is a new reference (ie, when any of the fields have been updated, assuming correct immutable updates). With state => state.profilePage.user, it will only re-render when the .user field has been updated.

As I said in the other thread, always try to select the minimal amount of data needed by this component, and that is true for both useSelector and mapState.

[anvk]

@markerikson I will ask another very silly question here which is possibly would be a good idea to mention in the documentation as well. It is the difference between:

const { user, isFetching } = useSelector(state => state.profilePage, shallowEqual) // profilePage consists of { user, isFetching } in the redux state

vs

const user = useSelector(state => state.profilePage.user)
const isFetching = useSelector(state => state.profilePage.isFetching)

My sample is heavily inspired by the conversation described here https://github.com/reduxjs/react-redux/issues/1459 Just instead of generic names I thought it might be more useful to be slightly more specific in this example.

@markerikson what would be a more idiomatic Redux way to select data in this case?

I see that the second approach is definitely more welcome for useState react hooks examples. Definitely highlights potentially re-usable chunks which could be put in their own re-usable custom hooks. But then I can also imagine of a case of getting 50 properties from the same state object… which at least will blow up code in sizes and making useSelector trying to get properties of the same object again and again (potential performance issue when we talking about large production data?).