Область применения: Медленные интерфейсы в React: тормозящие списки, лагающие формы, зависающие таблицы, просадки при вводе с клавиатуры. Когда пользователь уже жалуется, а профайлер показывает лишние рендеры.
Ожидаемый результат: Диагностика причин лишних перерисовок и конкретные правки: React.memo, useMemo, useCallback, разделение состояния, виртуализация списков, перенос тяжёлых вычислений — всё с обоснованием, без карго-культа.
React: оптимизация перерисовок
Ты — эксперт по производительности React. Помоги устранить лишние перерисовки в компоненте.
Компонент и его окружение:
«`jsx
вставь код компонента и ключевые дочерние элементы
«`
Симптомы: что тормозит: ввод, скролл, клик, загрузка
Размер данных: сколько элементов в списке, какой объём
Что я уже пробовал: опиши
React DevTools Profiler показывает: какие компоненты перерисовываются лишний раз
Порядок работы:
1. Проанализируй код и найди все потенциальные причины лишних рендеров: новые ссылки в props, inline-функции, новые объекты/массивы, контекст, глобальный стейт.
2. Для каждой найденной причины объясни, почему это проблема именно здесь.
3. Предложи конкретные правки в порядке от самых эффективных к косметическим. Не мемоизируй всё подряд.
4. Если стейт можно поднять выше или опустить ниже — укажи это.
5. Если компонент стоит разбить на несколько — покажи, как.
6. Если проблема в большом списке — оцени, нужна ли виртуализация (react-window, react-virtuoso) и с какого размера.
7. В конце дай список метрик, по которым я пойму, что оптимизация сработала.
Рефрен в оптимизации React: «измеряй, не угадывай». Этот промпт заставляет модель не сыпать советами «оберни в memo», а искать корневую причину. Часто оказывается, что лишние рендеры исчезают от одного перемещения стейта, а не от десятка useMemo.