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

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: ДиджиталСектор, Soft_Media_Group, Сбер, Evercode

Стек: React

> Пример ответа

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

Пример:

JSX
function withLogger(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Рендер с пропсами:', props);
    return <WrappedComponent {...props} />;
  };
}

// Использование
const MyComponent = (props) => <div>{props.text}</div>;
const MyComponentWithLogger = withLogger(MyComponent);

HOC используется для:

Повторного использования логики (например, авторизация, работа с данными)
Модификации пропсов или состояния
Добавления побочных эффектов (логирование, подписки)

Важно: HOC не изменяет исходный компонент, а создает новый обернутый компонент. С появлением хуков (useContext, useEffect) HOC стали менее популярны, но остаются актуальными в legacy-коде и библиотеках (например, connect из Redux).