Как работают хуки, способствующие мемоизации

Хуки мемоизации (useMemo, useCallback) помогают оптимизировать производительность, предотвращая ненужные вычисления и ререндеры.

useMemo кэширует результат вычислений между рендерами:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Вычисляет функцию только при изменении зависимостей [a, b].

useCallback мемоизирует саму функцию, сохраняя ссылку между рендерами:

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

Полезно для передачи колбэков в оптимизированные дочерние компоненты (например, обёрнутые в React.memo).

Ключевые моменты:

1. Не злоупотребляйте - хуки требуют памяти и могут дать обратный эффект
2. Зависимости должны включать все используемые в функции значения
3. Для примитивов мемоизация часто избыточна