PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Как кеширование влияет на дочерний компонент?

Компоненты

Под «кешированием» в React обычно понимают мемоизацию (React.memo/useMemo/useCallback). Влияние на дочерний компонент прямое: мемоизация родителя определяет, будет ли ребёнок перерисован.

Кеширование результата рендера (React.memo)

const Child = React.memo(ChildInner);

При рендере родителя React сравнивает props ребёнка (поверхностно, Object.is): равны — ребёнок не вызывается, переиспользуется прошлый результат вместе со всем его поддеревом. Значит, кешируется не только сам ребёнок, но и его дети.

Кеширование значений у родителя

useMemo/useCallback ничего не пропускают сами — они дают ребёнку стабильные ссылки, чтобы memo сработал:

const handleSelect = useCallback((id) => select(id), []);
const config = useMemo(() => ({ size: 20 }), []);

<Child onSelect={handleSelect} config={config} />

Без них каждый рендер создаёт новые объекты/функции — props «изменились», memo бесполезен.

Что кеширование НЕ останавливает

  • Обновление собственного state ребёнка.
  • Изменение контекста, который ребёнок читает через useContext (memo не спасает).
  • Подписки на стор (useSelector).
  • children: JSX-дети — новые объекты каждый рендер, memo с ними обычно не работает.

Побочные эффекты кеширования

Устаревшие данные при неполных deps (замыкание запомнило старый state) — ребёнок получает «стабильный», но неправильный колбэк. Это опаснее лишнего рендера.

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

React.memo кеширует результат рендера ребёнка: при равных props он и всё его поддерево не перерисовываются. useMemo/useCallback у родителя дают стабильные ссылки, без которых memo не сработает. Не защищает от собственного state, контекста, стора и нестабильных children; неполные deps дают устаревшие колбэки.

Другие вопросы раздела