Что такое Wrapper Component?

Wrapper Component («компонент-обёртка») — компонент, который принимает другие компоненты через children и добавляет вокруг них разметку, стили или поведение.

Пример

const Card = ({ title, children }) => (
  <section className="card">
    <h3 className="card__title">{title}</h3>
    <div className="card__body">{children}</div>
  </section>
);

// использование
<Card title="Профиль">
  <UserForm />     {/* попадёт в children */}
</Card>

Обёртка ничего не знает о содержимом — она отвечает за «раму»: отступы, границы, заголовок.

Типичные применения

• Layout: PageLayout, Container, Grid — каркас страницы.
• Провайдеры: <ThemeProvider>, <AuthProvider> — кладут контекст для поддерева.
• Граничные: ErrorBoundary, Suspense, RequireAuth (гард маршрута).
• Поведенческие: ClickOutside, Draggable, Portal-обёртка для модалок.

Чем полезен

• Переиспользование: одна рама — множество содержимого.
• Разделение ответственности: содержимое не знает об оформлении и наоборот.
• Производительность: children создаются выше обёртки, поэтому изменение внутреннего state обёртки не перерисовывает переданных детей — известный приём оптимизации.

Соседние понятия

• HOC — тоже «обёртка», но на уровне функции (компонент → компонент), а не JSX.
• Слоты — расширение паттерна: несколько именованных мест (<Layout header={…} sidebar={…}>).
• Compound components — обёртка + части, связанные внутренним контекстом (<Tabs><Tabs.Panel/></Tabs>).

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

Wrapper Component — компонент, оборачивающий children разметкой или поведением: layout, провайдеры, ErrorBoundary/Suspense, гарды. Даёт переиспользование и разделение ответственности; бонус — children, созданные снаружи, не перерисовываются при изменении state обёртки. Родственники: HOC (функция), слоты, compound-компоненты.