为什么此代码同时使用 useMemo 和 createSelector？

Question

React-Redux 文档提供了在多个组件实例中使用选择器并依赖于组件的 props 时的示例。

import React, { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { createSelector } from 'reselect'

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

export const TodoCounterForIsDoneValue = ({ isDone }) => {
  const selectNumOfTodosWithIsDone = useMemo(
    makeNumOfTodosWithIsDoneSelector,
    []
  )

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

  return <div>{numOfTodosWithIsDoneValue}</div>
}

export const App = () => {
  return (
    <>
      <span>Number of done todos:</span>
      <TodoCounterForIsDoneValue isDone={true} />
      <span>Number of unfinished todos:</span>
      <TodoCounterForIsDoneValue isDone={false} />
    </>
  )
}

在函数中TodoCounterForIsDoneValue，作者为什么用makeNumOfTodosWithIsDoneSelector来换行useMemo？createSelector我对from的理解reselect是它生成一个记忆选择器，那么“double”记忆这个选择器的目的是什么？

Answer 1

因为每个组件都需要自己唯一的选择器实例来实现正确的记忆行为。如果许多组件使用相同的选择器实例，并且每个组件都传递自己不同的参数（例如selectThingById(state, props.itemId)），则选择器将永远不会正确记忆。通过为每个组件创建一个唯一的实例，每个选择器都可以传入自己单独的参数并获得一致的记忆。