> Какие архитектурные паттерны используются в React (React)

Короткий ответ

В React используются несколько архитектурных паттернов: компонентная композиция, однонаправленный поток данных (unidirectional data flow), container/presentational, render props, higher-order components (HOC), hooks (как замена HOC и render props), Flux/Redux для управления состоянием, а также паттерны для работы с side effects (middleware, sagas, thunks). На уровне приложения часто применяют Feature-Sliced Design (FSD) или Atomic Design.

Подробное объяснение

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

• Компонентная композиция - базовый паттерн React: приложение строится из вложенных компонентов, каждый отвечает за свою часть UI.
• Container/Presentational - разделение логики и отображения: container управляет состоянием и данными, presentational только рендерит props.
• Higher-Order Components (HOC) - функция, которая принимает компонент и возвращает новый с дополнительной логикой (например, withAuth, withLoading).
• Render Props - компонент получает функцию через prop, которая возвращает React-элемент, что даёт гибкость в рендеринге.
• Hooks - современная замена HOC и render props: useReducer, useContext, кастомные хуки для инкапсуляции логики.
• Flux/Redux - однонаправленный поток данных: action → reducer → store → view. Паттерн решает проблему синхронизации состояния в больших приложениях.
• Middleware - прослойка между dispatch и reducer (redux-thunk, redux-saga) для обработки асинхронных операций.
• Feature-Sliced Design - методология организации кода по бизнес-фичам, а не по техническим слоям (components, pages, features, entities, shared).
• Atomic Design - иерархия компонентов: atoms → molecules → organisms → templates → pages.

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

На практике

Для типового SPA среднего размера я использую комбинацию:

• Hooks для локального состояния и логики (useState, useReducer, кастомные хуки).
• Context API для глобального состояния (темы, авторизация), если не нужна сложная логика.
• Redux Toolkit для сложного глобального состояния с асинхронными операциями (createAsyncThunk, createSlice).
• Feature-Sliced Design для структуры папок: каждая фича (например, features/auth, features/cart) содержит свои компоненты, hooks, API-слои.
• Container/Presentational внутри фичи: контейнер управляет данными, презентационный компонент - только рендеринг.

Для микросервисной архитектуры или SSR (Next.js) добавляю паттерны: server components, client components, streaming.

Пример кода

TSX
// Container/Presentational + Hooks
// Container (логика)
function UserProfileContainer() {
  const { user, loading, error } = useUserData(userId);
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  return <UserProfile user={user} />;
}

// Presentational (только отображение)
function UserProfile({ user }: { user: User }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Кастомный хук для инкапсуляции логики
function useUserData(userId: string) {
  const [state, setState] = useState({ user: null, loading: true, error: null });
  useEffect(() => {
    fetchUser(userId)
      .then(user => setState({ user, loading: false, error: null }))
      .catch(error => setState({ user: null, loading: false, error }));
  }, [userId]);
  return state;
}

Как отвечать на собеседовании

Начни с базовых паттернов (композиция, container/presentational), затем перейди к более сложным (HOC, render props, hooks) и объясни, почему hooks стали предпочтительнее. Упомяни Redux/Flux как решение для глобального состояния, но отметь, что для малых проектов достаточно Context API. Добавь про организацию кода (FSD, Atomic Design) - это показывает системное мышление. Приведи пример из реального проекта, где ты выбирал паттерн под конкретную задачу (например, замена HOC на hooks для улучшения читаемости). Не забывай про trade-offs: HOC могут вызывать prop drilling, render props - усложнять вложенность.

Что проверяет интервьюер

Интервьюер оценивает:

• Понимание базовых принципов React (композиция, unidirectional data flow).
• Умение выбирать паттерн под задачу, а не использовать один везде.
• Знание эволюции паттернов (от HOC к hooks) и причин изменений.
• Способность проектировать архитектуру приложения (не только компоненты, но и слои, модули).
• Понимание trade-offs: когда Context плох (частые ререндеры), когда нужен Redux (сложная логика, много асинхронных действий).

Типичные ошибки

• Путают архитектурные паттерны с паттернами проектирования (например, называют Singleton архитектурным).
• Считают, что Redux - единственный правильный паттерн для любого React-приложения.
• Не упоминают hooks как современную замену HOC и render props.
• Предлагают Container/Presentational без учёта hooks (теперь логика живёт в кастомных хуках, а не в классах-контейнерах).
• Игнорируют организацию кода (структуру папок) - это важная часть архитектуры.
• Не могут объяснить, почему выбрали именно этот паттерн в конкретном кейсе.