Представляем React Best Practices

Vercel опубликовал структурированный репозиторий с лучшими практиками React, оптимизированный для ИИ-агентов и больших языковых моделей.

Это AI-перевод статьи, сделанный каналом Про AI: Лучшие Статьи и Исследования.

Представляем React Best Practices

Introducing: React Best Practices Авторы: Shu Ding, Andrew Qu Оригинальный текст:

Мы собрали более 10 лет знаний по оптимизации React и Next.js в `react-best-practices` — структурированный репозиторий, оптимизированный для ИИ-агентов и больших языковых моделей.

Работа над производительностью React обычно носит реактивный характер. Выходит релиз, приложение кажется медленнее, и команда начинает гоняться за симптомами. Это дорого, и легко оптимизировать не то, что нужно.

Мы видели одни и те же первопричины в продакшн-кодовых базах более десяти лет:

• Асинхронная работа, которая случайно становится последовательной
• Большие клиентские бандлы, которые растут со временем
• Компоненты, которые перерендериваются чаще, чем нужно

«Почему» здесь просто: это не микрооптимизации. Они проявляются как время ожидания, дёрганье интерфейса и повторяющиеся издержки, которые бьют по каждой пользовательской сессии.

Поэтому мы создали этот фреймворк лучших практик React, чтобы такие проблемы было легче обнаружить и быстрее исправить.

Основная идея: приоритизация

Большинство работ над производительностью терпят неудачу, потому что начинаются слишком низко в стеке.

Если водопад запросов добавляет 600 мс времени ожидания, не имеет значения, насколько оптимизированы ваши вызовы useMemo. Если вы отправляете дополнительные 300 КБ JavaScript на каждой странице, экономия нескольких микросекунд в цикле не будет иметь значения.

Работа над производительностью также накапливается. Небольшая регрессия, которую вы отправляете сегодня, становится долгосрочным налогом на каждую сессию, пока кто-то не погасит этот долг.

Поэтому фреймворк начинается с двух исправлений, которые обычно первыми двигают реальные метрики:

1. Устранение водопадов
2. Уменьшение размера бандла

Затем он переходит к серверной производительности, клиентской загрузке данных и оптимизации перерендеринга.

Он включает более 40 правил в 8 категориях, упорядоченных по влиянию — от CRITICAL (устранение водопадов, уменьшение размера бандла) до инкрементальных (продвинутые паттерны).

Что ещё внутри?

Репозиторий охватывает восемь категорий производительности:

• Устранение асинхронных водопадов
• Оптимизация размера бандла
• Серверная производительность
• Клиентская загрузка данных
• Оптимизация перерендеринга
• Производительность рендеринга
• Продвинутые паттерны
• Производительность JavaScript

Каждое правило включает рейтинг влияния (от CRITICAL до LOW) для помощи в приоритизации исправлений, плюс примеры кода, показывающие что ломается и как это исправить.

Например, вот распространённый паттерн, который блокирует неиспользуемый код:

Неправильно (блокирует обе ветки):

async function handleRequest(userId: string, skipProcessing: boolean) {
  const userData = await fetchUserData(userId)
  
  if (skipProcessing) {
    // Возвращается сразу, но всё равно ждал userData
    return { skipped: true }
  }
  
  // Только эта ветка использует userData
  return processUserData(userData)
}

Правильно (блокирует только когда нужно):

async function handleRequest(
  userId: string,
  skipProcessing: boolean
) {
  if (skipProcessing) {
    return { skipped: true }
  }
  
  const userData = await fetchUserData(userId)
  return processUserData(userData)
}

Отдельные файлы правил компилируются в AGENTS.md — единый документ, который ваши агенты могут запрашивать при ревью кода или предложении оптимизаций. Он разработан для последовательного следования, в том числе ИИ-агентами, выполняющими рефакторинг (рефакторинг), чтобы команды могли применять одинаковые решения по всей большой кодовой базе.

Как эти практики были собраны

Это не теория. Они происходят из реальной работы над производительностью в продакшн-кодовых базах.

Несколько примеров:

Объединение итераций цикла

Страница чата сканировала один и тот же список сообщений восемь отдельных раз. Мы объединили это в один проход, что накапливается при тысячах сообщений.

Параллелизация await

API ждал завершения одного запроса к базе данных перед началом следующего, хотя они не зависели друг от друга. Запуск их одновременно сократил общее время ожидания вдвое.

Настройка запасных шрифтов

Заголовки выглядели сжато при использовании системного шрифта до загрузки пользовательских шрифтов. Настройка межбуквенного интервала сделала запасной вариант намеренным, а не сломанным.

Использование react-best-practices в вашем кодинг-агенте

Эти лучшие практики также упакованы как Agent Skills, которые устанавливаются в Opencode, Codex, Claude Code, Cursor и другие кодинг-агенты. Когда ваш агент замечает каскадные вызовы useEffect или тяжёлые клиентские импорты, он может ссылаться на эти паттерны и предлагать исправления.

npx add-skill vercel-labs/agent-skills

Ознакомьтесь с репозиторием `react-best-practices`.

Подпишитесь на канал и каждый день читайте лучшие материалы про AI переведенные на русский!

Нашли интересную статью для перевода? Пришлите нашему боту: @ailongreadsbot