Sharing selectors across multiple instances of a functional component

[manojmalik20]

As written in the docs,

To share a selector across multiple VisibleTodoList instances while passing in props and retaining
memoization, each instance of the component needs its own private copy of the selector.

The docs explain how to do this for a class component but there is no example or discussion about functional components.
I have multiple instances of a functional component and I am calling makeGetVisibleTodos inside the definition of the functional component like this

const demoFunctionalComp = (props) => {
    const getVisibleTodos = makeGetVisibleTodos();
    const todos = useSelector((state) => getVisibleTodos(state, props));
}

But I'm pretty sure that this is ruining the memoization. So how can I use the memoization properly like class components?

[markerikson]

Same basic approach, but you'd use useMemo or useCallback to generate the selector:

const MyFunctionComponent = (props) => {
  const selectVisibleTodos = useMemo(makeSelectVisibleTodos, [props.id]);
  const todos = useSelector(state => selectVisibleTodos(state, props));
}

[manojmalik20]

I did try using useCallback but was unable to. I used to think useMemo and useCallback are the same but now I know the difference. Thank you for the answer.