Какие знаешь подходы к написанию переиспользуемых компонентов

1. Композиция компонентов - разбиение на мелкие независимые части, которые можно комбинировать (как Lego). Пример: кнопка с иконкой и текстом.

<Button>
  <Icon name="user" />
  <Text>Login</Text>
</Button>

2. Props-контроль - компонент должен быть гибким через пропсы (children, className, стили). Пример:

function Card({ children, className }) {
  return <div className={`card ${className}`}>{children}</div>
}

3. Render Props/HOC - для логического переиспользования. Пример:

<DataFetcher render={(data) => <List items={data} />} />

4. Compound Components - связанные компоненты, разделяющие состояние (например, Tabs).

5. Custom Hooks - вынос общей логики в хуки.

6. Контекст - для передачи данных без пропс-дриллинга.

7. Дизайн-система - единые правила стилей, API и документации.

Главное - компонент должен делать одну вещь, быть предсказуемым и документированным.