Композиция компонентов

В React не наследуют компоненты — их составляют.

function Card({ title, actions, children }) {
  return (
    <section className="card">
      <header>{title}{actions}</header>
      {children}
    </section>
  );
}

<Card title="Корзина" actions={<ClearButton />}>
  <CartItems />
</Card>

Что важно знать

• children и именованные «слоты» через props — основной способ строить обёртки: модальные окна, раскладки, карточки.
• Композиция решает «проброс props через пять уровней» чаще, чем контекст.
• Render props (<List renderItem={…}/>) и HOC (withAuth(Component)) — старые приёмы переиспользования логики; сейчас их почти везде заменили пользовательские хуки, но в старом коде и библиотеках они встречаются.
• Составные компоненты (<Tabs><Tabs.List/><Tabs.Panel/></Tabs>) с общим контекстом — паттерн UI-библиотек.