useMemo и useCallback - когда они реально помогают, а когда вредят

Сегодня разберём больную тему: “обмазался мемоизацией - стало хуже”.

Когда useMemo/useCallback НЕ нужны

🔹Значение/функция не передаются в memo - компоненты и не используются как deps.
🔹Вычисление дешёвое (например, arr.map на 20 элементов).
🔹Ты добавил их “на всякий случай”.

Побочный эффект: ты усложняешь код и добавляешь лишнюю работу React (хранить кеш, сравнивать deps).

Когда они реально спасают

1. Стабильные пропсы для React.memo

const onSelect = React.useCallback((id) => {
  setSelected(id);
}, []);

2. Тяжёлые вычисления

const filtered = React.useMemo(() => heavyFilter(items, query), [items, query]);

3. Объекты в deps (чтобы не триггерить эффекты/хуки)

const params = React.useMemo(() => ({ q: query, page }), [query, page]);

Быстрый чек-лист перед добавлением мемоизации

🔹Это реально горячая точка? (профайлер/замеры)
🔹Без мемоизации есть лишние рендеры дочерних memo?
🔹Или это просто “красивее выглядит”?

✍️ @React_lib