Какие паттерны переиспользуемости существуют в React? Что такое Compound Components?

В React существуют разные паттерны переиспользуемости компонентов:

• HOC (Higher-Order Components) — функции, которые принимают компонент и возвращают новый с расширенным функционалом.
• Render Props — передача функции в пропсах, которая возвращает JSX, позволяя компоненту управлять логикой, а дочернему — рендером.
• Custom Hooks — выделение логики в переиспользуемые функции, которые используют хуки.
• Compound Components — паттерн, где несколько компонентов работают вместе, используя общий контекст, чтобы управлять состоянием и поведением. Это позволяет создавать гибкие и декларативные API.

Пример Compound Components:

const TabsContext = React.createContext();

function Tabs({ children }) {
  const [activeIndex, setActiveIndex] = React.useState(0);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      {children}
    </TabsContext.Provider>
  );
}

function TabList({ children }) {
  return <div>{children}</div>;
}

function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = React.useContext(TabsContext);
  return (
    <button
      style={{ fontWeight: activeIndex === index ? 'bold' : 'normal' }}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
}

function TabPanels({ children }) {
  const { activeIndex } = React.useContext(TabsContext);
  return <div>{children[activeIndex]}</div>;
}

// Использование:
// <Tabs>
//   <TabList>
//     <Tab index={0}>Tab 1</Tab>
//     <Tab index={1}>Tab 2</Tab>
//   </TabList>
//   <TabPanels>
//     <div>Content 1</div>
//     <div>Content 2</div>
//   </TabPanels>
// </Tabs>