Какие способы оптимизации рендеринга в React существуют
Что проверяют
Начнёте ли вы с измерения и понимаете ли, что чаще проблема в организации состояния.
Как отвечать
Сначала главное: сначала измерить. Профилировщик React показывает, какие компоненты перерисовываются и сколько это стоит. Расставлять мемоизацию наугад значит усложнять код без результата.
Приёмы по убыванию отдачи:
1. Правильное расположение состояния. Частая причина тормозов не React, а состояние, поднятое слишком высоко: значение поля ввода лежит в корне, и каждый символ перерисовывает всё приложение. Решение это опустить состояние вниз или выделить часть дерева в отдельный компонент.
2. Пропуск перерисовки обёрткой в мемоизацию плюс стабильные пропсы. Сама по себе обёртка бесполезна, если внутрь передают новый объект или новую функцию на каждом рендере, поэтому она работает в паре со стабилизацией значений.
3. Мемоизация вычислений: дорогой расчёт по списку не должен повторяться на каждом рендере.
4. Виртуализация длинных списков: рисуются только видимые строки. На списке в тысячи элементов это разница между рывками и плавностью, и никакая мемоизация её не заменит.
5. Ключи в списках: стабильный ключ вместо индекса. Индекс при вставке в середину заставляет перерисовать хвост и путает состояние элементов.
6. Разделение кода: ленивая загрузка тяжёлых экранов и библиотек с границей ожидания.
7. Несрочные обновления: отложенное значение и переход позволяют не блокировать ввод, пока пересчитывается тяжёлый список.
8. Контекст: изменение значения перерисовывает всех потребителей. Помогает разделение на несколько контекстов и мемоизация значения.
Полезно упомянуть, что компилятор React в версии 19 расставляет мемоизацию автоматически, и ручной работы становится меньше.
Где спотыкаются
Оборачивают всё подряд в мемоизацию без замера.
Держат частое состояние в корне приложения.
Используют индекс массива как ключ.
Мемоизируют компонент, но передают в него новый объект каждый рендер.