React Aria vs Base UI: выбор библиотеки для доступных компонентов

Последние полгода наблюдаю интересный тренд: всё больше команд пересматривают свои UI-киты в сторону большей доступности, но сталкиваются с дилеммой — брать готовые компоненты или собирать свои на низкоуровневых примитивах. Вопрос от u/iamdanieljohns про выбор между React Aria и Base UI попадает в самую точку этой дискуссии.

Что вообще за звери?

React Aria — это не UI-библиотека в классическом понимании. Это коллекция хуков и логики для управления состоянием компонентов с акцентом на a11y. Adobe разрабатывает её как основу для своих продуктов, но выносит в open source. Здесь вы не получите готовых <Button /> или <Modal />, но сможете собрать их с правильными ARIA-атрибутами и keyboard navigation.

Base UI от MUI — это следующий шаг эволюции после Material UI. Команда осознала, что не всем нужен Material Design, и сделала “голые” компоненты без стилей, но с продуманной API. В отличие от React Aria, здесь есть готовые JSX-компоненты, но их можно кастомизировать до неузнаваемости.

Когда выбирать React Aria

В моём текущем проекте мы пошли по пути React Aria, и вот какие плюсы обнаружили:

1. Полный контроль над DOM-структурой. Когда дизайн-система требует нестандартной семантики (например, комбинированные списки с иконками и чипами), готовые компоненты часто мешают.
2. Постепенное внедрение. Можно мигрировать по одному компоненту, не переписывая весь UI-слой.
3. Меньше vendor lock-in. Поскольку это не компоненты, а хуки, их проще заменить при необходимости.

Пример работы с useButton:

import { useButton } from 'react-aria';

function CustomButton(props) {
  const ref = React.useRef();
  const { buttonProps } = useButton(props, ref);
  
  return (
    <button 
      {...buttonProps} 
      ref={ref}
      className="your-custom-styles"
    >
      {props.children}
    </button>
  );
}

Но есть и боль: приходится писать больше boilerplate-кода для простых компонентов. Если у вас нет дизайн-системы или ресурсов на её поддержку, это может быть overkill.

Когда имеет смысл Base UI

Base UI подойдёт, если:

• Вам нужны готовые компоненты “из коробки”, но без навязчивых стилей
• Вы уже используете MUI-экосистему (Emotion, styled-components)
• Команда небольшая и нет ресурсов на разработку компонентов с нуля

Главный плюс — скорость разработки. Хотите кастомный select? Берите <SelectUnstyled /> и оборачивайте в свои стили:

import { SelectUnstyled } from '@mui/base';

const CustomSelect = styled(SelectUnstyled)`
  /* ваши стили */
`;

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

1. Всё ещё чувствуется наследие Material UI в API
2. Некоторые составные компоненты (например, date picker) сложно кастомизировать

Неочевидные подводные камни

1. Bundle size. React Aria использует tree-shaking, но если брать много хуков, размер может сравняться с Base UI.
2. Типографика. В Base UI нет компонентов для текста (как в Material UI), это нужно учитывать.
3. Доступность. Обе библиотеки хороши в a11y, но React Aria даёт больше контроля над семантикой.

Что выбрать в 2024?

После полугода работы с обеими библиотеками мой совет такой:

• Если у вас сложная дизайн-система и ресурсы на её поддержку — React Aria
• Если нужно быстро собрать MVP с кастомным дизайном — Base UI
• Если сомневаетесь — начните с Base UI, а критически важные компоненты (модалки, combobox) реализуйте через React Aria

Лично я склоняюсь к гибридному подходу: базовые компоненты через Base UI для скорости, сложные интерактивные элементы — с React Aria для полного контроля. Главное — не завязываться на одну библиотеку слишком сильно, потому что в этом году точно выйдет что-то новое.

Источник: https://www.reddit.com/r/reactjs/comments/1veiovb/react_aria_vs_base_ui/