Чем отличаются виды компонентов и где они применяются?

«Виды компонентов» в React классифицируют по нескольким осям, и у каждой своя область применения.

По синтаксису: функциональные и классовые

Функциональные с хуками — стандарт; классовые — легаси и Error Boundaries (componentDidCatch без хук-аналога).

По ответственности: умные и презентационные

• Контейнерные («умные»): данные, состояние, обработка действий. Живут в слое фич/страниц.
• Презентационные («глупые»): props → разметка, ничего не знают об API и сторе. UI-кит, максимальное переиспользование, простые тесты.

Граница после хуков размылась (логику выносят в кастомные хуки), но направление зависимостей сохраняют: UI-кит не знает о бизнесе.

По месту выполнения (RSC-эра)

• Серверные: выполняются на сервере, доступ к БД, ноль JS в бандле, без state и событий.
• Клиентские ('use client'): интерактивные, гидрируются в браузере.

Применение: данные и разметка — серверные, интерактивные острова — клиентские.

По роли в дереве

• Страницы (маршрут), layout (каркас с children), провайдеры (контексты в корне), граничные (ErrorBoundary, Suspense, гарды маршрутов), порталы (модалки, тултипы).

По структуре API

• Составные (compound): <Select><Select.Option/></Select> — общий контекст, гибкая разметка.
• HOC-обёртки — легаси-способ расширения (connect, memo).
• Headless-компоненты — логика без стилей (TanStack Table, Radix).

Коротко для собеседования

Оси: функциональные/классовые (стандарт против легаси+ErrorBoundary), умные/презентационные (данные против чистой разметки — переиспользование и тесты), серверные/клиентские (данные без JS против интерактива), роли в дереве (страница, layout, провайдер, граница, портал) и формы API (compound, headless, HOC).