Как HOC, render props и хуки в React соотносятся с паттернами Decorator и Strategy?

HOC — это Decorator над компонентом, render props — Strategy для отрисовки, хуки — композиция поведения функциями без обёрток. Все три решают одну задачу: переиспользовать логику с состоянием.

HOC ≈ Decorator

• withAuth(Component) возвращает компонент с тем же контрактом плюс поведение: проверка доступа, загрузка, дополнительные пропсы.
• Минусы: «wrapper hell» в DevTools, коллизии имён пропсов, неочевидно, откуда пришёл user; нужно пробрасывать ref и копировать статические поля (hoist-non-react-statics).
• HOC — это и React.memo, и connect из react-redux.

Render props ≈ Strategy

• Компонент владеет логикой (позиция мыши, данные формы), а способ отрисовки получает функцией: <Mouse render={p => <Cursor {...p} />} />.
• Данные передаются явно, коллизий нет. Но вложенные render props образуют «пирамиду», а инлайн-функция на каждом рендере ломает мемоизацию.

Хуки

• useMouse(), useAuth() возвращают данные явно и не меняют дерево компонентов.
• Хук вызывает другие хуки — композиция без классов и обёрток.
• Ограничения rules of hooks: вызывать только на верхнем уровне, в одинаковом порядке, только из компонентов и хуков.

Что выбирать сегодня

• Логика с состоянием → хук по умолчанию.
• Сквозная обёртка на уровне роутинга или библиотеки → HOC.
• Отдать потребителю контроль над разметкой (headless-компоненты, children как функция) → render props.

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

HOC оборачивает компонент как Decorator, render props передаёт способ отрисовки как Strategy, а хуки переиспользуют логику с состоянием без лишних обёрток. Сегодня по умолчанию пишут хук, HOC оставляют для сквозных обёрток и легаси-классов, render props — для headless-компонентов.