Как кеширование влияет на дочерний компонент?
Компоненты
Под «кешированием» в 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 дают устаревшие колбэки.