Как контролировать компонент при кешировании?

Мемоизацией компонента управляют на нескольких уровнях: когда пропускать рендер, а когда всё-таки обновляться.

Уровень 1: включить кеширование

const Row = React.memo(RowInner);

Поверхностное сравнение props: равны — рендер пропущен.

Уровень 2: задать правила сравнения

Второй аргумент memo — собственный компаратор:

const Chart = React.memo(ChartInner, (prev, next) => {
  return prev.data.revision === next.data.revision; // true = НЕ рендерить
});

Полезно для тяжёлых объектов с «версией». Осторожно: ошибочный true заморозит компонент с устаревшими данными; глубокое сравнение может стоить дороже рендера.

В классах то же — shouldComponentUpdate (обратная семантика: true = рендерить) или PureComponent.

Уровень 3: контролировать входы

Мемоизация управляется тем, что приходит в props:

• useCallback/useMemo у родителя — стабильные ссылки (иначе memo не сработает);
• не передавать инлайн-объекты и лишние props;
• children выносить в мемоизированные переменные или менять архитектуру (children-как-проп).

Уровень 4: принудительно сбросить кеш

• Изменить любой проп (или его ссылку) — компонент отрендерится.
• Сменить key — компонент пересоздаётся полностью (сбрасывается и state).
• Внутренний state, контекст и подписки на стор игнорируют memo — компонент обновится в любом случае.

Практика

Мемоизировать точечно по профайлеру; проверять, что цепочка не сломана (props действительно стабильны), иначе оптимизация существует только на бумаге.

Коротко для собеседования

Контроль на четырёх уровнях: React.memo включает сравнение; второй аргумент задаёт свои правила (true = пропустить рендер); стабильность props (useCallback/useMemo) определяет, сработает ли кеш; сброс — изменение пропа или смена key. State, контекст и стор мемоизацию обходят всегда.