Что значит оптимизация в React
Что проверяют
Понимаете ли вы, что оптимизировать, и начинаете ли с измерения.
Как отвечать
Сначала разделите, о чём вообще речь. Под оптимизацией в React обычно понимают три разные задачи:
- лишние рендеры: компоненты пересчитываются, хотя их результат не изменился;
- дорогой рендер: тяжёлые вычисления или длинный список внутри одного компонента;
- размер сборки и время загрузки: к самому React отношения не имеет, но влияет на ощущение скорости сильнее всего.
Важное уточнение, без которого разговор уходит не туда: рендер это не перерисовка страницы. Рендер это вызов функции компонента, после чего React сравнивает результат с предыдущим и трогает страницу только там, где есть отличия. Поэтому лишний рендер обычно дёшев, и бороться с ним имеет смысл только когда он действительно дорогой.
Порядок работы: сначала профилировщик, потом изменения. Он показывает, что именно пересчитывается и сколько это стоит.
Приёмы, по убыванию отдачи:
- правильное расположение состояния. Частое состояние, поднятое в корень, перерисовывает всё приложение на каждый символ. Опустить его вниз или выделить поддерево обычно даёт больше, чем любая мемоизация;
- виртуализация длинных списков: рисуются только видимые строки;
- разделение кода и ленивая загрузка тяжёлых экранов;
- мемоизация компонента вместе со стабилизацией пропсов. По отдельности бесполезна;
- композиция через содержимое: элемент, переданный внутрь, не пересоздаётся при рендере обёртки, и мемоизация не нужна вовсе;
- несрочные обновления через отложенное значение и переход, чтобы тяжёлый пересчёт не блокировал ввод.
Полезно упомянуть, что компилятор React в девятнадцатой версии расставляет мемоизацию автоматически, и ручной работы становится меньше.
Где спотыкаются
Расставляют мемоизацию наугад без профилировщика.
Путают рендер компонента с обновлением страницы.
Держат частое состояние в корне приложения.
Оптимизируют перерисовки, когда проблема в размере сборки.