React Best Practices

React Best Practices

Комплексное руководство по оптимизации производительности приложений на React и Next.js от инженеров Vercel. Включает 57 правил, сгруппированных в 8 категорий и отсортированных по степени влияния.

Что внутри

• Устранение каскадных запросов (CRITICAL) — параллельные запросы, отложенные await, границы Suspense
• Оптимизация размера бандла (CRITICAL) — прямые импорты, динамические импорты, отложенная загрузка сторонних библиотек
• Производительность на сервере (HIGH) — аутентификация в Server Actions, React.cache(), LRU-кэширование, сериализация RSC
• Получение данных на клиенте (MEDIUM-HIGH) — дедупликация SWR, обработчики событий, localStorage
• Оптимизация повторных рендеров (MEDIUM) — производные состояния, функциональный setState, ленивые инициализации, transitions
• Производительность рендеринга (MEDIUM) — content-visibility, вынос статического JSX, исправления гидратации
• Производительность JavaScript (LOW-MEDIUM) — использование Set/Map, объединение итераций, ранние возвраты
• Продвинутые паттерны (LOW) — ссылки на обработчики событий, инициализация приложения, useEffectEvent

Когда использовать

• При разработке новых компонентов React или страниц Next.js
• При реализации получения данных (на клиенте или сервере)
• Во время ревью кода с точки зрения производительности
• При рефакторинге React/Next.js приложений
• Для оптимизации размера бандла или времени загрузки
• При отладке медленного рендеринга или каскадных запросов

Ключевые принципы

Главная идея — приоритизация. Оптимизация должна начинаться с наиболее затратных узких мест. Если приложение страдает от каскадных запросов или большого объема JavaScript, микрооптимизации не дадут заметного эффекта.

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

Примеры паттернов

Параллельные запросы вместо последовательных

// Плохо
const user = await fetchUser()
const posts = await fetchPosts()

// Хорошо
const [user, posts] = await Promise.all([
 fetchUser(),
 fetchPosts()
])

Динамические импорты

// Плохо
import { MonacoEditor } from './monaco-editor'

// Хорошо
const MonacoEditor = dynamic(
 () => import('./monaco-editor').then(m => m.MonacoEditor),
 { ssr: false }
)

Функциональный setState

// Плохо
setItems([...items, item])

// Хорошо
setItems(curr => [...curr, item])

Чего не стоит делать

• Не выполняйте асинхронные операции последовательно, если их можно запустить параллельно
• Не используйте barrel-импорты — импортируйте модули напрямую
• Не игнорируйте аутентификацию в Server Actions
• Не передавайте лишние данные в клиентские компоненты
• Не используйте && для условного рендеринга чисел
• Не подписывайтесь на состояние, если оно нужно только в обработчиках событий
• Не мутируйте массивы через .sort()
• Не инициализируйте данные внутри useEffect([])

Вывод

React Best Practices — это не набор случайных советов, а системный подход к оптимизации. Следование этим правилам позволяет создавать более быстрые, предсказуемые и масштабируемые приложения, минимизируя технический долг и улучшая пользовательский опыт.