Redux-toolkit: should I use both useSelector and useCallback

I was previously using useSelector from Redux using something like:

  const todo = useSelector((state) => state.todos[props.id])

as documented. However, in another related library called proxy-memorize, they recommend instead to use (for their own library):

useSelector(useCallback(memoize(state => ({ … }))))

but now I’m confused: should I use useCallback inside useSelector generally when I’m not using proxy-memorize? If not, why does proxy-memorize requires it?

> useSelector(useCallback(memoize(state => ({ … }))))
>
> but now I’m confused: should I use useCallback inside useSelector
> generally when I’m not using proxy-memorize?

Generally, no, you do not need to memoize the selector function via the useCallback hook, useSelector((state) => state.todos[props.id]) is fine. React-redux and the useSelector hook applies some equality checks during updates. Italicized and bolded text emphasis is mine to highlight what I believe to be relevant with regards to selector function reference stability.

> When the function component renders, the provided selector function
> will be called and its result will be returned from the useSelector()
> hook. (A cached result may be returned by the hook without re-running
> the selector if it's the same function reference as on a previous
> render of the component.)
>
> However, when an action is dispatched to the Redux store,
> useSelector() only forces a re-render if the selector result appears
> to be different than the last result. The default comparison is a
> strict === reference comparison.

> If not, why does proxy-memorize requires it?

Note also from the docs that

> With useSelector(), returning a new object every time will always
> force a re-render by default.

Where one of the proposed solutions is

> Use Reselect or a similar library to create a memoized selector that
> returns multiple values in one object, but only returns a new object
> when one of the values has changed.

Using useSelector(state => ({ … })) would trigger a force rerender even if the returned object was equivalent. The memoize function from proxy-memoize serves to memoize the returned result, and wrapping it in the useCallback hook serves to memoize, e.g. provide, a stable function reference to the useSelector hook. useSelector(useCallback(memoize(state => ({ … })))) provides the broadest form of stability optimization by memoizing (A) the selector callback function, and (B) memoizing the selector function results. Note in the usage with react redux section this is the suggested pattern to use if you are not using reselect.

I've not ever heard of proxy-memoize, but a Reselect version of the code may look something like the following:

import { createSelector } from 'reselect'; // *

const selectTodos = state => state.todos;

export const selectTodoById = createSelector(
  [todos, (state, id) => id],
  (todos, id) => todos[id],
);

const todo = useSelector((state) => selectTodoById(props.id))

The selectTodoById selector function is a memoized selector, e.g. memoizes the selected todo object using the state.todos and passed id value as inputs. Only when either of these two values changes the selector function recompute its value, otherwise it simply returns the memoized value.

* Note: If you are using Redux-Toolkit, it re-exports all of Reselect (the same maintainers of Redux, React-Redux, and Redux-Toolkit also maintain Reselect):

import { createSelector } from '@reduxjs/toolkit';