Что такое useMemo и useCallback, в чём разница и когда использовать?

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

• useMemo запоминает результат вычисления функции и пересчитывает его только если изменились зависимости. Используется для мемоизации значений.

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

Разница:

• useMemo возвращает значение (результат функции).
• useCallback возвращает функцию.

Когда использовать:

• useMemo — если вычисление значения дорогостоящее и его не нужно пересчитывать без изменения зависимостей.
• useCallback — если нужно передать функцию вниз по дереву компонентов и избежать лишних перерендеров из-за изменения ссылки на функцию.

Пример:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a); }, [a]);