Сегодня написал пост на тему, которая регулярно бьёт по скорости разработки: почему Rea...
Сегодня написал пост на тему, которая регулярно бьёт по скорости разработки: почему React-приложение “тормозит”, даже когда кажется, что код нормальный. Часто вижу одну и ту же ситуацию: компонент маленький, логика простая, данных немного, а интерфейс всё равно начинает дёргаться. Особенно в формах, таблицах и списках. Обычно проблема не в React как таковом. Проблема в том, что мы слишком поздно начинаем смотреть что именно ререндерится. Вот 3 вещи, которые я первым делом проверяю: 1. Родитель слишком “шумный” Если родительский компонент часто обновляет state, все дочерние компоненты тоже могут улетать в ререндер. Даже если визуально ничего не меняется. 2. useMemo и useCallback не спасают автоматически Их часто добавляют “на всякий случай”, но без понимания, где узкое место. В итоге код становится сложнее, а пользы - ноль. 3. Ключи в списках Нестабильные key - классика. Если в списке стоит index, React может пересоздавать элементы там, где не должен. Особенно больно это ощущается в интерактивных списках. Мой рабочий подход простой: • сначала открываю React DevTools Profiler • нахожу, какой компонент ререндерится чаще всего • проверяю, это реально нужно или нет • только потом оптимизирую Главная мысль: не оптимизируйте React вслепую. Сначала найдите источник лишних ререндеров. Очень часто после этого оказывается, что фикс занимает 5 минут, а не 2 часа. ✍️ @React_lib