Глава 21. Производительность и оптимизация

Зачем эта глава

Если приложение начинает «тормозить», пользователь это сразу заметит. Здесь мы научимся выявлять и устранять лишние перерендеры.

React перерисовывает компоненты при изменении state или props.

React.memo, useMemo, useCallback помогают избежать лишних вычислений.

JSX

const MemoCard = React.memo(function Card({ title }) {
  return <div>{title}</div>;
});

Подсказка: оптимизация нужна не всегда. Сначала измеряй, потом улучшай.

Если заказчик жалуется на «тормоза», проси видео или список шагов воспроизведения, а затем измеряй и оптимизируй точечно.

Ты понимаешь, как находить и уменьшать лишние перерисовки.

Цель: оптимизировать таблицу из 100 элементов.

Требования: минимум перерисовок при кликах.

Критерий готовности: интерфейс реагирует мгновенно.