memo, useMemo, useCallback

React.memo пропускает перерисовку дочернего компонента только когда его следующие пропсы поверхностно равны предыдущим. По умолчанию дочерний перерисовывается всякий раз, когда перерисовывается родитель, независимо от пропсов. memo меняет это: перед перерисовкой React поверхностно сравнивает каждый пропс через Object.is. Примитивы сравниваются по значению, поэтому пропс типа number или string, который не изменился, проходит. Но объекты, массивы и функции сравниваются по ссылке — свежий литерал на каждый рендер никогда не равен по Object.is прошлому, так что сравнение проваливается и дочерний всё равно рендерится.

const Row = React.memo(function Row({ user, onSelect }: {
  user: User;
  onSelect: (id: string) => void;
}) {
  return <li onClick={() => onSelect(user.id)}>{user.name}</li>;
});
// обещание memo: пропустить перерисовку, ЕСЛИ user И onSelect стабильны по ссылке

Так что memo необходим, но недостаточен. Он покупает тебе пропуск, только когда каждый непримитивный пропс приходит со стабильной идентичностью. Следующие два инструмента — то, как ты эту стабильность поставляешь.

useMemo кэширует идентичность вычисленного значения; useCallback кэширует идентичность функции — оба по массиву зависимостей. Это сторона предложения в контракте. useMemo(fn, deps) запускает fn и возвращает ту же ссылку, пока не изменится dep. useCallback(fn, deps) возвращает ту же ссылку на функцию, пока не изменится dep — это буквально useMemo(() => fn, deps). Их смысл почти никогда не в скорости самого вычисления; он в ссылочной стабильности, чтобы нижестоящий memo (или проверка зависимостей эффекта) увидел «то же значение, пропускаю».

function UserList({ users, onSelect }: Props) {
  // стабильная идентичность → memo-<Row onSelect> может пропустить
  const handleSelect = useCallback((id: string) => onSelect(id), [onSelect]);
  // стабильная идентичность → memo-потребитель `visible` может пропустить
  const visible = useMemo(() => users.filter((u) => u.active), [users]);
  return visible.map((u) => <Row key={u.id} user={u} onSelect={handleSelect} />);
}

Если написать const handleSelect = (id) => onSelect(id), ты чеканишь новую функцию на каждый рендер, и любой нижестоящий memo, сравнивающий этот пропс, проваливается каждый раз. Кэш стабилен ровно настолько, насколько стабильны ссылки, которые ты в него подаёшь.

Трио — одна система: memo-дочернему нужны стабильные пропсы, а стабильные пропсы бесполезны без memo-дочернего. Представь цепь. useCallback/useMemo производят стабильные ссылки → эти ссылки передаются как пропсы → React.memo поверхностно сравнивает их и, находя равными, пропускает. Убери memo — и дочерний перерисовывается всё равно, так что стабильная идентичность ничего не купила. Убери useCallback/useMemo — и пропс меняет идентичность на каждый рендер, так что сравнение memo всегда проваливается и он никогда не пропускает. Каждое звено должно присутствовать, иначе вся цепь — пустышка.

// ❌ разорванная цепь: стабильный обработчик, но Row НЕ обёрнут в memo → рендерится всё равно
const handleSelect = useCallback(fn, [fn]);
return <PlainRow onSelect={handleSelect} />; // useCallback здесь буквально ничего не делает

// ❌ разорванная цепь: Row обёрнут в memo, но обработчик — свежий литерал → никогда не пропускает
return <MemoRow onSelect={(id) => onSelect(id)} />;

// ✅ замкнутая цепь: memo-дочерний + стабильный пропс → Row пропускает, пока user/onSelect не менялись
return <MemoRow user={user} onSelect={handleSelect} />;

Это senior-переформулировка: ты не «добавляешь useCallback». Ты либо замыкаешь цепь мемоизации, либо её у тебя нет.

Два режима отказа: мемоизация без memo-потребителя и неправильный массив зависимостей. Первый — чистая трата: useCallback или useMemo, чей результат течёт только в обычный (не-memo) компонент, в интринсик-элемент вроде <button onClick={...}> или вообще никуда, не имеющего отношения к рендеру. Он стоит аллокации и проверки зависимостей на каждый рендер и пропускает ноль рендеров. Второй — тоньше и хуже: массив зависимостей, опускающий значение, которое читает замыкание, даёт тебе устаревшее кэшированное значение (колбэк, вызывающий onSelect прошлого рендера), тогда как массив с нестабильным значением (инлайн-объект, значение, меняющееся каждый рендер) инвалидирует кэш на каждый рендер, так что ты платишь всю цену мемоизации и не получаешь никакой выгоды.

// ❌ устаревание: обработчик замыкается на `query`, но deps его опускают → стреляет старым запросом
const search = useCallback(() => fetchResults(query), []); // баг: пропущен `query`

// ❌ самоподрыв: `options` — новый объект на каждый рендер → useMemo пересчитывает всегда
const opts = { sort: "name" };
const sorted = useMemo(() => sortBy(users, opts), [users, opts]); // opts ломает это

Линт-правило react-hooks/exhaustive-deps ловит случай устаревания. Случай не-memo-потребителя за тебя не ловит ничто — это отказ рассуждения, а не синтаксиса, и потому «мемоизация — это система» должна стать привычкой, а не пунктом чек-листа.