> Как работают useMemo и useCallback для оптимизации производительности React-компонентов (React)

Короткий ответ

useMemo и useCallback - хуки React для мемоизации. useMemo кеширует результат вычисления функции между рендерами, useCallback - саму функцию. Оба принимают зависимость (deps) и пересчитываются только при её изменении. Используются для предотвращения лишних ререндеров дочерних компонентов и тяжёлых вычислений. Однако их применение оправдано только при реальных проблемах производительности, так как сами хуки имеют накладные расходы.

Подробное объяснение

useMemo и useCallback решают проблему нестабильных ссылок и избыточных вычислений в React. При каждом рендере компонента все функции и объекты создаются заново, что может приводить к ненужным ререндерам дочерних компонентов, обёрнутых в React.memo, или к повторным вызовам useEffect.

useMemo принимает функцию и массив зависимостей. React сохраняет результат вызова функции и возвращает его на следующих рендерах, пока зависимости не изменятся. Это полезно для дорогих вычислений (например, сортировка большого массива, фильтрация данных).

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

Важно понимать trade-off: мемоизация требует сравнения зависимостей на каждом рендере, что само по себе имеет стоимость. Кроме того, неправильно указанные зависимости приводят к багам с устаревшими данными (stale closures). React не гарантирует, что мемоизированное значение не будет пересчитано при освобождении памяти (например, при unmount).

На практике

На уровне senior ожидается, что кандидат не просто знает синтаксис, но и понимает, когда мемоизация действительно нужна. Типичные сценарии:

• Передача колбэка в компонент, обёрнутый в React.memo, особенно в списках (например, onClick для каждого элемента в FlatList или VirtualizedList).
• Использование в контексте (context) для предотвращения ререндеров всех потребителей при изменении нерелевантных данных.
• Тяжёлые вычисления в рендере (например, форматирование дат, сложные математические операции, трансформация данных из API).

Антипаттерны: оборачивать в useMemo простые операции (сложение строк, конкатенацию), использовать useCallback для каждого колбэка без React.memo на дочернем компоненте, указывать пустой массив зависимостей для функций, которые должны обновляться.

Пример кода

JSX
import React, { useState, useMemo, useCallback } from 'react';

const ExpensiveList = React.memo(({ items, onRemove }) => {
  console.log('ExpensiveList render');
  return items.map(item => (
    <div key={item.id} onClick={() => onRemove(item.id)}>
      {item.name}
    </div>
  ));
});

function App() {
  const [items, setItems] = useState([...]);
  const [filter, setFilter] = useState('');

  // Мемоизация дорогой фильтрации
  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]);

  // Мемоизация колбэка для React.memo
  const handleRemove = useCallback((id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  }, []);

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <ExpensiveList items={filteredItems} onRemove={handleRemove} />
    </div>
  );
}

Как отвечать на собеседовании

Начни с краткого определения, затем перейди к механике: как React сравнивает зависимости (через Object.is), как работает замыкание в колбэках. Покажи понимание внутреннего устройства - например, что useCallback(fn, deps) эквивалентен useMemo(() => fn, deps). Обязательно упомяни, что мемоизация не бесплатна и её следует применять только после профилирования. Приведи пример, когда useMemo не помогает, а вредит (например, при простых вычислениях). Хорошо показать знание альтернатив: вынос состояния в useRef для стабильных ссылок, использование useReducer для сложной логики.

Что проверяет интервьюер

• Понимание жизненного цикла React-компонента и механизма ререндеров.
• Умение отличать реальные проблемы производительности от преждевременной оптимизации.
• Знание тонкостей: stale closure, сравнение зависимостей, работа React.memo в связке с хуками.
• Способность объяснить trade-off между читаемостью, производительностью и корректностью.
• Глубина: знание, что useCallback не предотвращает создание функции, а только возвращает старую ссылку.

Типичные ошибки

• Использование useMemo для примитивных значений (строки, числа) - бессмысленно, так как они сравниваются по значению.
• Забывание указать все зависимости, что приводит к багам с устаревшими данными (stale closure).
• Оборачивание всех колбэков в useCallback без React.memo на дочернем компоненте - это только добавляет накладные расходы.
• Использование useMemo для JSX-элементов - это антипаттерн, так как React сам оптимизирует рендер через virtual DOM.
• Создание новых объектов/массивов внутри тела useMemo - мемоизируется только результат, а не внутренние ссылки.
• Путаница между useMemo и useCallback: первый для значений, второй для функций.