> Как избежать лишних перерендеров компонентов в React (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Иннотех, Т-Банк, Kvando Technologies, Soft_Media_Group, ООО Премиум ИТ Солюшен, Sminex, Kodix, Домклик, Centicore, IT-One, Swetec, Софт Медиа Групп, DigitalSail, Exness, Сбер, Исходный Код, HolyWeb, SmartWay

Стек: React

> Пример ответа

Для предотвращения лишних перерендеров в React применяются следующие техники:

React.memo - оборачивает функциональный компонент, сравнивая пропсы поверхностно (shallow comparison). Если пропсы не изменились, компонент не перерендеривается:
```
JSX
const MyComponent = React.memo(({ data }) => <div>{data}</div>);
```

useMemo - мемоизирует результат вычислений, пересчитывая его только при изменении зависимостей:

JSX
const expensiveValue = useMemo(() => computeExpensive(a, b), [a, b]);

useCallback - мемоизирует функцию, предотвращая создание нового экземпляра при каждом рендере:

JSX
const handleClick = useCallback(() => doSomething(id), [id]);

Избегайте передачи объектов/массивов в пропсы без мемоизации - каждый рендер создаёт новые ссылки, что ломает React.memo. Используйте useMemo для стабильных ссылок.
Правильное использование ключей (keys) - при рендере списков уникальные ключи помогают React минимизировать перерендеры элементов.
Вынос состояния вниз - если часть компонента не зависит от изменяемых данных, вынесите её в отдельный мемоизированный компонент.
Избегайте анонимных функций/объектов в JSX - они создаются заново каждый рендер. Выносите их в переменные или используйте useCallback.
React.lazy и Suspense - для ленивой загрузки компонентов, которые не нужны сразу.

Важно: не мемоизируйте всё подряд - профилируйте приложение (React DevTools Profiler) и применяйте оптимизации только там, где есть реальные проблемы с производительностью.