> Что такое HOC (Higher Order Component) в React (React)

Короткий ответ

HOC (Higher-Order Component) - это функция, которая принимает компонент и возвращает новый компонент с расширенной функциональностью. Это паттерн для повторного использования логики между компонентами, основанный на композиции, а не наследовании. HOC не модифицирует исходный компонент, а оборачивает его, добавляя props или поведение.

Подробное объяснение

HOC - это функция вида (Component) => EnhancedComponent. Она позволяет вынести общую логику (например, работу с данными, подписки, авторизацию) из нескольких компонентов в одно место. HOC не изменяет переданный компонент, а создаёт новый, который рендерит оригинал с дополнительными props.

Типичные случаи использования:

• подключение к store (как connect в Redux)
• управление состоянием загрузки
• кеширование данных
• логирование
• проверка прав доступа

Важно: HOC - это не API React, а паттерн, который стал популярным до появления hooks. Сейчас многие задачи решаются через custom hooks, но HOC всё ещё встречаются в legacy-коде и некоторых библиотеках.

На практике

HOC применяется, когда нужно:

• добавить одинаковое поведение нескольким компонентам без дублирования кода
• обернуть компонент в контекст или провайдер
• реализовать conditional rendering (например, показывать спиннер пока данные загружаются)

При использовании HOC нужно:

• передавать через props все данные, которые нужны обёрнутому компоненту
• избегать мутации исходного компонента
• правильно копировать статические методы (через hoist-non-react-statics)
• передавать ref через React.forwardRef

Пример кода

JSX
// HOC для добавления логики загрузки данных
function withLoading(Component) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Загрузка...</div>;
    }
    return <Component {...props} />;
  };
}

// Использование
const UserListWithLoading = withLoading(UserList);

// В родительском компоненте
<UserListWithLoading isLoading={loading} users={users} />

Как отвечать на собеседовании

Начни с определения: "HOC - это функция, которая принимает компонент и возвращает новый с дополнительной функциональностью". Приведи пример из реальной практики (Redux connect). Упомяни, что с появлением hooks HOC стали менее популярны, но их нужно знать для работы с legacy-кодом. Покажи понимание trade-off: HOC могут усложнять отладку из-за вложенности, но хорошо подходят для сквозной функциональности.

Что проверяет интервьюер

• понимание композиции в React
• умение отличать HOC от render props и hooks
• знание паттернов повторного использования логики
• способность объяснить, когда уместно использовать HOC, а когда - альтернативы

Типичные ошибки

• путают HOC с обычным компонентом-обёрткой (wrapper component)
• забывают передавать все props в обёрнутый компонент
• мутируют исходный компонент внутри HOC
• не обрабатывают refs (нужен forwardRef)
• не копируют статические методы (displayName, getDerivedStateFromProps и т.д.)