Какие паттерны переиспользования кода в React применяются на практике и какие проблемы они решают?

Переиспользование в React делится на два вида: переиспользование логики и переиспользование UI. Для каждого — свои паттерны.

Кастомные хуки — основной паттерн для логики

const useDebounce = (value, delay) => { ... };
const online = useOnlineStatus();

Решают: дублирование stateful-логики (загрузка, подписки, формы, дебаунс) без обёрток и «матрёшки» в DevTools; композируются друг из друга, тестируются изолированно. Шарится логика, а не данные: у каждого вызова своё состояние.

Композиция и children/слоты — для UI

<Card header={<Title/>} footer={<Actions/>}>{content}</Card>

Решают: жёсткость компонентов и prop drilling; вместо десятка «настроечных» props потребитель передаёт готовые куски разметки.

Составные компоненты (compound)

<Tabs><Tabs.List/><Tabs.Panel/></Tabs>

Общий внутренний контекст, свободная разметка. Решают: гибкость сложных виджетов без «пропс-взрыва».

Headless-компоненты/хуки

Логика без стилей (TanStack Table, Radix, React Hook Form): решают конфликт «готовый UI против своей дизайн-системы».

HOC — легаси-паттерн

withAuth(Component), connect, React.memo. Решают расширение поведения обёрткой; сегодня уступают хукам, остаются там, где нужно управлять самим рендерингом или обернуть чужой компонент.

Render props

<DataProvider render={(data) => ...} /> — предшественник хуков; встречается в легаси и там, где нужен инверсный контроль рендера.

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

Логика — кастомные хуки (заменили HOC и render props: композиция, тесты, отсутствие обёрток). UI — композиция через children/слоты, составные компоненты (compound + контекст) и headless-библиотеки для логики без стилей. HOC/render props — легаси, уместны при контроле рендеринга чужого компонента.