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

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

Если ты выбираешь библиотеку в реальном проекте, смотри не только на популярность, но и на API, поддержку, интеграцию с твоим стеком и цену миграции в будущем. Экосистема меняется быстрее любых списков, поэтому полезнее держаться за логику выбора, а не за ощущение, что существует один «правильный» пакет на все случаи.

Как читать этот список

  • не пытайся выбрать библиотеку «на все случаи»;
  • сначала определи проблему, потом категорию, и только затем сравни 2-3 кандидата;
  • если библиотека закрывает редкий кейс, не добавляй ее заранее «на всякий случай».

3D

react-three-fiber - это threejs для React в web и react-native.

Большая часть впечатляющих 3D-анимаций в вебе построена на three.js — react-three-fiber позволяет работать с ним в React-стиле. Также стоит посмотреть на react-three-next — стартер для Next.js.

Accessibility

React Aria

React Aria предоставляет хуки, которые обеспечивают доступность компонентов, поэтому всё, о чем нужно беспокоиться, - это дизайн и стиль.

Пример использования - useButton:

import { useButton } from '@react-aria/button';
function Button(props) {
  let ref = React.useRef();
  let { buttonProps } = useButton(props, ref);
  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}
<Button onPress={() => alert('Button pressed!')}>Press me</Button>;

Animation

Две основные библиотеки для анимации в React-экосистеме.

Обе библиотеки имеют схожие API-интерфейсы и поддерживают физику пружины и временную анимацию, хотя Framer Motion, похоже, чаще используется на GitHub.

Framer Motion

Framer Motion - это библиотека анимации и жестов, созданная Framer. Дополнительным преимуществом Framer Motion является то, что дизайнеры могут создавать анимацию во Framer, а затем передавать проекты для точной реализации с использованием собственной библиотеки Framer.

React Spring

React Spring использует физику пружины, а не временную анимацию для анимации компонентов. По сравнению с Framer Motion, React Spring находится в разработке дольше, с большим количеством участников с открытым исходным кодом.

Возможности браузера

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

useClippy

useClippy - это React хук, который позволяет читать и писать в буфер обмена пользователя. Особенно полезно для улучшения UX; позволяет уберечь пользователей от двойного щелчка по полям данных, предоставив им кнопку для копирования значений.

ReactPlayer

ReactPlayer позволяет вставлять видео из основных источников (YouTube, Facebook, Twitch, SoundCloud и другие) с возможностью кастомных элементов управления.

React Toastify

React Toastify позволяет добавлять причудливые уведомления из приложения (например, уведомление «Сообщение отправлено» в Gmail) в React приложение с помощью всего четырех дополнительных строк кода.

Библиотеки запроса данных

Тебе может быть интересно, зачем вообще нужна библиотека для запроса данных, если можно использовать useEffect и fetch(). Короткий ответ заключается в том, что эти библиотеки также обрабатывают кеширование, загрузку и состояние ошибок, избегая избыточных сетевых запросов и многое другое.

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

React Query

React Query позволяет запрашивать данные из одной и той же конечной точки API (например, api/users/1) через несколько компонентов, не вызывая множественных сетевых запросов.

SWR

Подобно React Query (см. сравнение), SWR - еще одна библиотека для запроса данных, которую стоит проверить. SWR имеет дополнительную безопасность, так как Vercel использует его в производстве как часть своей платформы.

Визуализация данных

visx

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

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

Forms

React Hook Form

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

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

Formik

Formik - популярное решение для создания форм, так как он предоставляет многоразовый компонент, в котором можно просто использовать его API для обработки трех наиболее раздражающих частей при построении форм:

  • получение значений внутри формы и вне его состояния;
  • сообщения о проверке и ошибках;
  • обработка отправки формы.

Mocking APIs

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

Mock Service Worker

MSW - это библиотека, которая позволяет имитировать как REST, так и GraphQL API; использует service workers для генерации реальных сетевых запросов.

MSW можно подключать не только в тестах, но и как часть обычного рабочего процесса разработки — независимо от стека. Kent C. Dodds написал об этом подробно.

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

State Management

С первых дней Redux экосистема управления состоянием заметно расширилась. Несколько вариантов на разный вкус.

Jotai

Jotai описывает себя как примитивное решение для управления состоянием для React и конкурента Recoil. Это довольно минималистично - меньше API для изучения; и если ты понимаешь хук useState в React, ты, вероятно, поймешь хук Jotai useAtom.

Mobx

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

Recoil

Recoil. Представь, что Redux встречается с React Hooks, без шаблонов.

Redux Toolkit

Redux Toolkit (или RTK) - это официальный, уверенный способ управлять своим состоянием с помощью Redux.

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

xstate

XState - библиотека, которая позволяет формализовать приложение React как конечный автомат.

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

XState также создает диаграммы на основе конфигурации xstate приложения: твоя документация будет обновляться по мере того, как кодишь.

Zustand

Zustand - ещё одна библиотека, которая стремится быть простой и незамысловатой. Основное отличие состоит в том, что ты используешь хуки в качестве основного способа получения состояния и он не требует привязки приложения к context providers.

Testing

React Testing Library

React Testing Library (RTL) - библиотека тестирования по умолчанию, которая поставляется с приложением create-react-app.

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

Videos

Remotion

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

Итог

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

Если нужен практичный следующий шаг, он простой: выбери одну категорию, выпиши 2-3 кандидата и сравни их не по лайкам, а по тому, как они влияют на API компонентов, тесты, размер связанного кода и будущую миграцию.