React - как заменить хук useCallback на useMemo?

Я читаю эту статью о мемоизации в React, и мне интересно, как я могу перевести и использовать useMemoвместо useCallbackхука. В частности, для этого примера:

<Child name={ useCallback(() => {console.log('Really Skinny Jack')}, []) } />


Где дочерний компонент выглядит так:

export default React.memo(function Child({ name }) {
console.log("Child component");
return (
<>
{name()}
<div>Child component</div>
</>
);
});


Если я попытаюсь заменить это на useMemo:

<Child
name={useMemo(() => {
console.log("useMemo");
}, [])}
/>


Я получаю сообщение об ошибке:

TypeError name is not a function


Я также пробовал так:

{useMemo(
<Child
name={() => {
console.log("useMemo");
}}
/>,
[]
)}


Но тогда я получаю:

TypeError nextCreate is not a function


Итак, как я могу заменить useCallbackв useMemoэтом примере?

Решение проблемы

С useMemo, вы можете сделать это так

<Child
name={useMemo(() => {
// return the function or anything you want react to memoize
return () => {
console.log('useMemo');
};
}, [])}
/>


С помощью useMemoвсе, что вы вернете из useMemoобратного вызова, будет запомнено. С другой стороны, useCallbackиспользуется только для запоминания функций.

Некоторые ключевые отличия, на которые стоит обратить внимание

useMemo

Используется для запоминания функций, массивов, объектов и т. д.

const memoizedList = useMemo(() => {
return [1, 2, 3];
}, []);
const memoizedFunction = useMemo(() => {
return () => {
console.log('I am meoized');
};
}, []);


useCallback

Используется для запоминания функций

const memoizedFunction = useCallback(() => {
console.log('I am meoized');
}, []);


React.memo

Компонент высшего порядка для запоминания компонентов React

const MyComponent = (props) => {
return "I am a memoized component";
}
export default React.memo(MyComponent);