Как использовать useMemo и useCallback
Скорее всего вы знакомы с хуками useMemo и useCallback. Эти хуки используются практически в каждом проекте, и чем больше они используются, тем больше усложняют код компонента. Многие используют эти хуки, не до конца понимая зачем они нужны, и пишут их, потому что все так делают, так проще.
На самом деле большинство использований данных хуков неправильно и можно обойтись без них. В некоторых случаях приложение без них будет работать немного быстрее. Это не значит, что хуки useMemo и useCallback бесполезны, просто использовать их нужно в определенных случаях, а не всегда.
Основная задача хуков useMemo и useCallback- это мемоизация между ре-рендерами компонента. Если какое-то непримитивное значение или функция объявлены в теле компонента, то каждый раз при рендере будет создаваться новая ссылка на значение. При мемоизации значение будет закэшировано во время первого рендера и при последующих рендерах будет возвращаться ссылка на закэшированное значение. Это удобно при использовании с useEffect:
const Component = () => {
// сохранение ссылк между ре-рендерами
const a = useMemo(() => ({ test: 1 }), []);
useEffect(() => {
// будет вызван когда значение “a” изменится
}, [a]);
};
Использование хуков useMemo и useCallback полезно только при ре-рендерах. При первом рендере React кэширует значения, поэтому рендерится компонент немного медленнее.
Один из популярных вариантов использования хуков мемоизации – это предотвращение ререндера компонента путем мемоизации пропсов. Например:
const Item = ({ item, onClick }) => <button onClick={onClick}>{item.name}</button>;
const Component = ({ data }) => {
const value = useMemo(() => ({ a: someStateValue }), [someStateValue]);
const onClick = useCallback(() => {
console.log(value);
}, [value]);
return (
<>
{data.map((d) => (
<Item item={d} onClick={onClick} />
))}
</>
);
};
В примере выше использование хуков нецелесообразно. Компонент ререндерится, если родительский компонент ререндерится. Чтобы предотвратить ререндер компонента, нужно использовать функцию React.memo. Компонент обернутый в React.memo будет ререндерится, только если изменятся пропсы. Поэтому все пропсы для этого компоненты должны быть мемоизированны.
Однако, прежде чем мемоизировать все пропсы для компонента стоит проверить производительность компонента. Если компонент работает быстро, то мемоизация не нужна.
www.developerway.com/posts/h…callback
