Когда следует использовать useMemo и useCallback, и какую проблему они решают?

Question

Accepted Answer

Оба кэшируют что-то между рендерами, чтобы это не пересчитывалось/не пересоздавалось каждый раз:
- **`useMemo`** кэширует **вычисленное значение**.
- **`useCallback`** кэширует **идентичность функции** (это `useMemo(() => fn, deps)`).

Они существуют для того, чтобы избежать (a) повторения дорогостоящей работы и (b) нарушения равенства ссылок, от которого зависят мемоизированные дочерние компоненты.

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## Почему это важно

Без `useCallback`, `handleSelect` — это совершенно новая функция при каждом рендере. `React.memo(Grid)` увидит «новый» пропс и все равно отрендерится, нарушив мемоизацию. То же самое касается объекта, передаваемого мемоизированному потомку, или используемого в массиве зависимостей `useEffect`.

## Компромиссы — не переусложняйте

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Мемоизация не бесплатна: она стоит памяти плюс сравнение зависимостей при **каждом** рендере.
- Неправильный/отсутствующий массив зависимостей дает вам **устаревшие значения** — самую частую ошибку.
- Мемоизируйте только когда вы измерили реальную проблему (дорогостоящее вычисление или мемоизированный потомок, который слишком часто перерендеривается). Преждевременное использование `useMemo`/`useCallback` везде добавляет шума и может быть даже медленнее. (Компилятор React 19 может автоматически мемоизировать, снижая необходимость.)