Библиотеки, лежащие в основе современных React-приложений

Современное React-приложение — это, по большей части, сам React плюс небольшой, предсказуемый набор библиотек: одна для получения серверных данных, одна для клиентского состояния, одна для маршрутизации, одна для стилизации, одна для UI-примитивов и одна для форм. Сам React — сейчас это ветка 19.2 — отвечает за компоненты, хуки и рендеринг. Всё остальное — это выбор, и постоянные изменения в экосистеме делают эти решения сложнее, чем они есть на самом деле. В действительности для каждой задачи сегодня существует очевидный вариант по умолчанию и одна-две ситуативные альтернативы.

В этой статье стек рассматривается по принципу «задача — инструмент»: фундамент, состояние, получение данных, маршрутизация, стилизация, UI, формы и анимация. Для каждой категории приводится вариант по умолчанию на 2026 год, случаи, когда стоит обратиться к альтернативе, и то, как выбор взаимодействует с двумя силами, меняющими облик экосистемы, — React Server Components (RSC) и React Compiler.

Фундамент React-проекта: выбор фреймворка

Прежде чем выбирать библиотеки, нужно определиться с фундаментом приложения — и в 2026 году это решение во многом определяется тем, нужны ли вам React Server Components. Задача здесь — скаффолдинг проекта, инструменты сборки, маршрутизация и стратегия рендеринга, объединённые в единую отправную точку.

Для большинства новых приложений Next.js является выбором по умолчанию: это наиболее полноценный полностековый React-фреймворк со стабильной поддержкой RSC, серверными экшенами и файловой маршрутизацией. Выбирайте Vite, когда вы создаёте клиентское одностраничное приложение и хотите быстрой, ненавязчивой сборки без полноценного фреймворка — маршрутизацию и получение данных вы собираете самостоятельно. Выбирайте Astro, когда проект ориентирован на контент — маркетинговые страницы, документация, блоги — и вы хотите поставлять преимущественно статический HTML с React-островами только там, где нужна интерактивность. Выбирайте TanStack Start, когда приоритетом являются типобезопасная маршрутизация и серверные функции, и вы готовы работать с ранними версиями: библиотека находится на стадии Release Candidate v1, приближается к стабильному релизу, а поддержка RSC ещё в разработке.

Два фактора, которые стоит учитывать при выборе любого из этих вариантов, — React Server Components, переносящие получение данных на сервер, и React Compiler, автоматически мемоизирующий компоненты вне зависимости от выбранного фундамента.

Что React Compiler меняет в выборе библиотек

React Compiler теперь стабилен и меняет то, какие оптимизации вы пишете вручную. React Compiler 1.0 вышел 7 октября 2025 года, был анонсирован на React Conf и автоматически мемоизирует компоненты и значения хуков во время сборки, устраняя большинство ручных вызовов useMemo и useCallback. Для выбора библиотек это важно, поскольку целый класс шаблонного кода, прежде загромождавшего интеграции, — оборачивание селекторов, мемоизация коллбэков, передаваемых в поля форм, стабилизация производных значений — теперь обрабатывается компилятором.

Практический эффект на выбор библиотек: автоматическая мемоизация ослабляет аргументы в пользу атомарных библиотек состояния с точки зрения производительности и устраняет целую категорию шаблонного кода из интеграций с формами. Теперь библиотеки выбираются исходя из их модели данных и удобства использования, а не из того, сколько ручной настройки требуется, чтобы избежать лавины повторных рендеров. Компилятор поддерживается в Vite, Next.js и Expo согласно документации по установке React Compiler.

Библиотеки управления состоянием в React: таксономия четырёх категорий

В современных React-приложениях существует четыре отдельные категории состояния: серверное состояние, управляемое TanStack Query; клиентское UI-состояние, обрабатываемое useState или Zustand; состояние URL, принадлежащее nuqs; и глобальное состояние приложения в Zustand. Использование неподходящего инструмента для конкретной категории — наиболее распространённый источник излишней сложности. Большинство болей, связанных со сложностью управления состоянием, возникает из-за хранения серверных данных в клиентском хранилище или моделирования общего UI-состояния, которое должно находиться в URL, как глобального состояния.

Благодаря TanStack Query для серверного состояния, встроенным хукам для локального состояния и URL для общего UI-состояния область, требующая выделенного глобального хранилища, значительно сократилась. Когда оно всё же нужно, Zustand является выбором по умолчанию — минималистичное хранилище create() с подписками на селекторы и без провайдера:

import { create } from 'zustand'

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}))

Выбирайте Redux Toolkit, когда вы поддерживаете или расширяете существующую кодовую базу Redux и хотите использовать его DevTools с перемоткой времени и структурированным отслеживанием экшенов. Выбирайте Jotai, когда вам действительно нужны мелкозернистые атомарные подписки — хотя с автоматической мемоизацией React Compiler аргумент о повторных рендерах в пользу атомарной модели стал слабее, чем прежде. Для состояния URL nuqs предоставляет типизированные параметры поиска, так что фильтры и пагинация сохраняются после обновления страницы и легко передаются через ссылки.

Серверное состояние и значение staleTime по умолчанию

staleTime в TanStack Query по умолчанию равен 0, то есть каждое монтирование компонента помечает данные как устаревшие и инициирует фоновый повторный запрос. Для стабильных данных, таких как навигационные меню или профили пользователей, установка ненулевого значения staleTime — это наиболее эффективное изменение конфигурации, которое большинство приложений никогда не делает. Документация по важным настройкам по умолчанию объясняет это следующим образом:

import { useQuery } from '@tanstack/react-query'

// staleTime по умолчанию равен 0 → повторный запрос при каждом монтировании.
// Установите ненулевое значение для данных, которые не меняются при каждом переходе.
const { data } = useQuery({
  queryKey: ['profile'],
  queryFn: fetchProfile,
  staleTime: 5 * 60 * 1000, // 5 минут
})

Типичный сценарий сбоя в продакшене — оставить это значение по умолчанию: в записях сессий data-heavy приложений часто видны каскады фоновых повторных запросов, срабатывающих при каждом переходе между маршрутами. Этот паттерн сложно связать с единственной строкой конфигурации, пока не посмотришь на воспроизведение сетевых запросов в реальной пользовательской сессии.

Библиотеки для получения данных и маршрутизации в React

Для получения данных выбор по умолчанию зависит от места запроса. Для клиентского получения данных — кэширование REST или GraphQL, оптимистичные обновления, фоновая синхронизация — TanStack Query является вариантом по умолчанию. В RSC-фреймворке, таком как Next.js 16, данные запрашиваются на сервере внутри Server Components и передаются вниз через пропсы, что полностью исключает необходимость в клиентской библиотеке для получения данных. Выбирайте Apollo Client, когда GraphQL является основой и вам нужно нормализованное кэширование; выбирайте tRPC, когда вы контролируете и клиент, и сервер на TypeScript и хотите сквозного вывода типов без слоя схемы.

Маршрутизация следует той же логике разделения сервер/клиент. При использовании мета-фреймворка маршрутизация входит в его состав. В противном случае React Router — наиболее распространённая библиотека; она поставляется как в режиме классической клиентской библиотеки, так и в полноценном режиме фреймворка с лоадерами, экшенами и серверным рендерингом. Выбирайте TanStack Router, когда приоритетом является типобезопасный вывод маршрутов — он стабилен в версии v1 с лучшим в своём классе выводом типов TypeScript для параметров и поиска.

TanStack Start — предлагающий типобезопасную файловую маршрутизацию, серверные функции и SSR — приближается к стабильности в виде Release Candidate v1. Согласно документации TanStack Start, поддержка RSC ещё в разработке, что делает Next.js 16 более полноценным полностековым выбором для команд, которым RSC нужен уже сейчас. Следите за ним как за перспективным новичком, а не как за текущим вариантом по умолчанию.

Библиотеки стилизации в React и совместимость с RSC

Совместимость с RSC теперь является первостепенным критерием при выборе подхода к стилизации. Runtime CSS-in-JS библиотеки, такие как styled-components и Emotion, выполняют инъекцию стилей в браузере, что конфликтует с моделью React Server Components, предполагающей рендеринг на сервере. Поэтому в Next.js 16 с RSC совместимыми вариантами по умолчанию являются Tailwind CSS v4 или CSS Modules, но не runtime CSS-in-JS.

Tailwind CSS — это utility-first вариант по умолчанию. Ветка v4 перенесла конфигурацию в CSS через директиву @theme и поставляется с более быстрым движком согласно анонсу Tailwind v4. Один атрибут className обеспечивает всю стилизацию:

<h1 className="text-blue-700">{title}</h1>

Выбирайте CSS Modules, когда вам нужен совместно расположенный, изолированный CSS без необходимости изучать словарь utility-классов — они ничего не утекают и прекрасно работают в RSC. Выбирайте build-time CSS-in-JS, например vanilla-extract, когда вам нужны типобезопасные стили, написанные на TypeScript, без накладных расходов во время выполнения.

styled-components находится в режиме поддержки с марта 2025 года и не рекомендуется для новых проектов, однако это не заброшенный проект — он по-прежнему работает в RSC за границей 'use client' и в версии v6.4 добавил RSC-совместимую тематизацию через CSS-переменные с помощью createTheme.

Общий вывод остаётся в силе: runtime-инъекция стилей конфликтует с моделью серверного рендеринга, поэтому utility-first или build-time подходы являются более безопасным выбором для новых RSC-приложений.

UI-библиотеки для React: модель зависимости против модели владения

Ключевое архитектурное решение на уровне UI — устанавливать версионированную библиотеку компонентов или владеть кодом компонентов напрямую. Стилизованные библиотеки компонентов — MUI, Mantine, Chakra UI, Ant Design — предоставляют отполированную, настраиваемую дизайн-систему в виде зависимости, которую вы обновляете со временем. Модель владения, популяризованная shadcn/ui, копирует исходный код компонентов прямо в ваш проект.

Модель копирования-вставки shadcn/ui означает, что вы владеете кодом компонентов напрямую — нет версионированной зависимости для обновления, нет миграций при критических изменениях, нет дизайнерских решений автора библиотеки, которые нельзя переопределить. Это архитектурно отличается от установки MUI или Mantine и объясняет, почему shadcn/ui стал выбором по умолчанию для команд, создающих кастомные дизайн-системы на Tailwind. Репозиторий набрал более 110 тысяч звёзд на GitHub.

// Модель владения: Button живёт в вашем репозитории, вы редактируете его напрямую.
import { Button } from '@/components/ui/button'

// Модель зависимости: Button поставляется из версионированного пакета.
import { Button } from '@mui/material'

shadcn/ui строит свои компоненты на безголовых примитивах, и примитивом по умолчанию является Radix. Согласно документации shadcn/ui, в начале 2026 года Base UI был добавлен как официальная альтернативная примитивная библиотека, однако Radix остаётся рекомендуемым вариантом по умолчанию.

Radix поддерживается WorkOS с момента приобретения Modulz в 2022 году, и некоторые разработчики считают, что темп его выпусков замедлился — именно в этом контексте появился Base UI (от команды MUI) как альтернатива. Тем не менее shadcn/ui по-прежнему использует Radix по умолчанию, который остаётся активно поддерживаемым проектом с открытым исходным кодом под лицензией MIT. Выбирайте Base UI, когда вам нужны примитивы из экосистемы MUI/Floating UI с гибкостью в выборе движка стилизации; выбирайте полностью стилизованную библиотеку, такую как Ant Design, когда вы создаёте корпоративные data-heavy интерфейсы и хотите получить готовые таблицы, формы и датапикеры, а не собирать их самостоятельно.

Библиотеки форм для React

React Hook Form — это вариант по умолчанию для форм в современном React. Его подход основан на неконтролируемых полях: они регистрируются через рефы, а не хранят каждое нажатие клавиши в состоянии React, что минимизирует повторные рендеры по своей природе. При валидации через схемы стандартной парой является React Hook Form плюс Zod для runtime-валидации и вывода типов.

import { useForm } from 'react-hook-form'

const { register, handleSubmit } = useForm()

Согласно документации React Hook Form, register подключает поле к форме без превращения его в контролируемое. С автоматической мемоизацией React Compiler ручная мемоизация коллбэков, которая прежде требовалась в коде интеграции для обработчиков полей, устранена, что дополнительно упрощает подключение. Выбирайте TanStack Form, когда вам нужна полностью типобезопасная обработка сложного, глубоко вложенного состояния формы; выбирайте Conform, когда вы создаёте формы с прогрессивным улучшением на основе серверных экшенов. Formik и React Final Form фактически не поддерживаются — избегайте их в новых проектах.

Типичный сценарий сбоя в продакшене при работе с формами — избыточные повторные рендеры из-за контролируемых полей, обновляющих состояние при каждом нажатии клавиши. Неконтролируемая модель порождает меньше промежуточных событий изменения состояния, что в записях сессий проявляется как более чистые трассировки взаимодействий — меньше лишних рендеров между вводом пользователя и отправкой формы.

Библиотеки анимации для React

Motion — это де-факто стандарт анимации для React. Motion — библиотека, ранее известная как Framer Motion, — использует имя пакета motion и путь импорта motion/react, достигла мажорной версии v12 с полной поддержкой React 19 и набирает около 30 миллионов загрузок в месяц на npm.

Декларативный API обеспечивает большинство потребностей приложений с помощью пропсов initial и animate:

import { motion } from 'motion/react'

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

Согласно документации Motion, библиотека поддерживает жесты, переходы макета и AnimatePresence для анимации выхода. Важное замечание о доступности: уважайте медиазапрос prefers-reduced-motion, который MDN описывает как стандартный сигнал о том, что пользователь предпочитает минимальную анимацию — Motion позволяет читать его и условно отключать анимации. Выбирайте react-spring, когда вам нужна физически обоснованная пружинная анимация как основная модель; выбирайте GSAP, когда необходима точная оркестровка таймлайнов для множества элементов.

Вспомогательный стек: аутентификация, тестирование, графики и i18n

Помимо основного стека, несколько категорий дополняют большинство приложений — по одному разумному варианту по умолчанию для каждой:

• Аутентификация: Auth.js
• Тестирование: Vitest для юнит-тестов, Playwright для end-to-end
• Графики: Recharts
• Интернационализация: i18next

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

Стек React 2026 в одном взгляде

Для приложения на Next.js 16 сегодня совместимые варианты по умолчанию выстраиваются по задачам следующим образом:

Заключение

Смена инструментов — реальная проблема, но пространство решений невелико: выбирайте правильную категорию для своего состояния, получайте данные на сервере там, где это позволяет фреймворк, используйте Tailwind и shadcn/ui для UI-слоя, а Motion и React Hook Form — для анимации и форм. Два изменения, которые стоит усвоить прямо сейчас: React Compiler устраняет большинство ручной мемоизации из кода интеграции, а совместимость с RSC является жёстким фильтром — runtime CSS-in-JS и ещё не стабильная поддержка RSC сужают то, что подходит для приложения на Next.js 16. Начните с этих вариантов по умолчанию, а затем переходите к альтернативе только тогда, когда конкретное требование — масштаб GraphQL, типобезопасная маршрутизация, физическая анимация — действительно этого требует.

Часто задаваемые вопросы

Можно ли использовать styled-components с React Server Components?

styled-components работает с React Server Components только за границей 'use client', поскольку выполняет инъекцию стилей в браузере во время выполнения, что конфликтует с моделью серверного рендеринга RSC. Библиотека перешла в режим поддержки в марте 2025 года и не рекомендуется для новых проектов, хотя по-прежнему выпускает обновления и добавила RSC-совместимую тематизацию через CSS-переменные. Для новых RSC-приложений совместимыми вариантами по умолчанию являются Tailwind CSS v4 или CSS Modules, поскольку оба генерируют стили во время сборки, а не во время выполнения.

В чём разница между моделью владения shadcn/ui и установкой библиотеки вроде MUI?

shadcn/ui копирует исходный код компонентов непосредственно в ваш проект, так что вы владеете файлами и редактируете их напрямую — без версионированной зависимости для обновления и без миграций при критических изменениях. MUI и Mantine устанавливаются как версионированные пакеты, которые вы импортируете и обновляете со временем, обменивая контроль над кастомизацией на управляемые обновления. Модель владения подходит командам, создающим кастомные дизайн-системы и желающим полного контроля над переопределениями; модель зависимости подходит командам, которым нужна отполированная, поддерживаемая дизайн-система без владения кодом.

Когда следует использовать Zustand вместо useState для клиентского состояния?

Используйте Zustand, когда состояние должно разделяться между удалёнными компонентами, не имеющими прямой связи родитель-потомок, — например, корзина покупок, тема или данные сессии, доступные из многих мест. Используйте useState или useReducer для состояния, локального для одного компонента или небольшого поддерева, — например, черновики форм и переключатели. Использование Zustand для сугубо локального состояния добавляет косвенность без пользы, тогда как хранение действительно глобального состояния в пробрасывании пропсов или контексте создаёт лишние проблемы с повторными рендерами и связанностью.

Заменяет ли React Compiler TanStack Query или библиотеку управления состоянием?

Нет. React Compiler 1.0, стабильный с 7 октября 2025 года, автоматически мемоизирует компоненты и значения хуков во время сборки, устраняя большинство ручных вызовов useMemo и useCallback, однако он не управляет кэшированием серверного состояния, фоновыми повторными запросами или разделением состояния между компонентами. TanStack Query по-прежнему нужен для серверного состояния, а Zustand или useState — для клиентского. Компилятор меняет объём ручной настройки, требуемой для этих интеграций, но не необходимость в самих библиотеках.