Рендеринг и производительность React

Компонент перерисовывается, когда меняется его состояние, контекст, на который он подписан, или перерисовался родитель — по умолчанию вместе с родителем перерисовываются все потомки, даже если их props не изменились.

Что важно знать

• Перерисовка — это вызов функции и сравнение элементов, а не обязательно изменение DOM. Чаще всего она дешёвая.
• React.memo пропускает перерисовку при тех же props; работает, только если props стабильны — объекты и функции создаются заново на каждом рендере, поэтому нужны useMemo/useCallback.
• React Compiler автоматически запоминает значения и компоненты, снимая большую часть ручной мемоизации.
• Опустить состояние ниже по дереву или передать тяжёлые части через children — часто лучше любой мемоизации.
• Длинные списки — виртуализация (рендерить только видимое).
• useTransition и useDeferredValue — несрочные обновления не мешают вводу.
• Измерять до оптимизации: React DevTools Profiler.