<b>5 мест в React, где лишний ререндер тихо съедает скорость интерфейса</b>

<b>5 мест в React, где лишний ререндер тихо съедает скорость интерфейса</b>

React редко «тормозит» сам по себе. Чаще проблема в том, что один лишний state тянет за собой половину дерева, а потом команда ищет причину в сети, бандле или CSS.

Первое место — props, которые создаются заново на каждом рендере: объекты, массивы, inline-колбэки. Для дочернего компонента это уже новый ввод, даже если содержимое то же.

Второе — контекст. Один большой Provider выглядит удобно, пока любое изменение не начинает обновлять всех подписчиков сразу. Разделяйте домены и не складывайте в один контекст всё подряд.

Третье — списки. Если ключи нестабильны, React не может нормально переиспользовать элементы. Визуально это часто выглядит как «мигание» формы, потеря фокуса или странная анимация.

Четвёртое — derived state. Если значение можно вычислить из props и уже имеющегося state, не дублируйте его отдельным состоянием. Два источника правды почти всегда превращаются в два источника багов.

Пятое — тяжёлые вычисления в render. Если сортировка, фильтрация или парсинг выполняются на каждом проходе, интерфейс начинает платить за каждое нажатие клавиши. Тут уже уместны memoization и вынос расчётов.

Хорошая привычка простая: сначала найти источник лишнего обновления, потом уже лечить memo, useCallback и useMemo. Иначе можно оптимизировать не то место.