Composition vs inheritance в React?

Суть на практике

В React composition (композиция) — основной способ переиспользования: дети, слоты, обёртки. Inheritance (наследование классов) почти не используют и не рекомендуют.

Composition

function Page({ sidebar, children }) {
  return (
    <div className="layout">
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

<Page sidebar={<Nav />}>
  <Article />
</Page>

Специализация через пропсы/children, а не через class Modal extends Dialog.

Почему не inheritance

• Жёсткие иерархии плохо стыкуются с props и hooks.
• Сложно предсказать merge lifecycle/методов.
• Экосистема и docs сфокусированы на function components + composition.
• HOC/render props/hooks закрывают те же задачи без extends.

Паттерны композиции

• children / multiple slots (header, footer)
• Component as prop (icon={SaveIcon})
• Compound components (Menu + Menu.Item)
• Custom hooks — переиспользование логики без UI-иерархии

Фраза для интервью

«В React предпочитаем композицию наследованию: поведение собираем из маленьких компонентов и хуков, а не строим глубокие class-иерархии». Это прямой отголосок официальной философии React.