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

Что проверяют

Умеете ли вы разделять ответственность в React-приложении: где живёт состояние, где логика, где отображение. Список «Redux, Context, хуки» тут слабый ответ, от вас ждут условий выбора. Следом часто просят разложить по папкам новый проект.

Как отвечать

Разложите паттерны по уровням. Компоненты:

• композиция: сборка из мелких компонентов через children и слоты вместо наследования и десятка флагов в пропсах;
• кастомные хуки: вынос логики с состоянием и эффектами (useDebounce, useCart) из разметки. Они во многом вытеснили HOC и render props;
• compound components: связанные компоненты с общим контекстом, как Tabs с Tabs.List и Tabs.Panel;
• контролируемые и неконтролируемые компоненты: значением владеет родитель через value и onChange или сам DOM через ref.

Данные:

• однонаправленный поток: данные вниз пропсами, события вверх колбэками. Flux и Redux переносят эту идею на глобальное состояние, сейчас это Redux Toolkit;
• серверное состояние отдельно: кеш запросов в TanStack Query или RTK Query, а в сторе (Zustand, Redux) остаётся только клиентское состояние;
• Context: доставка значения вглубь дерева, а не стор. Подходит для темы, локали, текущего пользователя.

Приложение:

• Server Components в React 19 и Next.js App Router: данные грузятся на сервере, на клиент уходит только интерактивная часть с "use client";
• структура проекта: Feature-Sliced Design или деление по фичам вместо общих папок components и utils;
• микрофронтенды через Module Federation, когда над продуктом работают независимые команды.

Где спотыкаются

Называют Context заменой Redux. При смене значения перерисуются все потребители, и для часто меняющихся данных это бьёт по производительности.

Складывают ответы API в Redux вручную, с флагами loading и error в каждом слайсе, вместо библиотеки серверного состояния с кешем и инвалидацией.

Перечисляют паттерны без условий. Сильнее звучит так: небольшому приложению хватит локального состояния и TanStack Query, а глобальный стор нужен, когда клиентские данные делят далёкие друг от друга экраны.