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

Higher Order Component (HOC)

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

Основная идея

HOC позволяет выносить общую логику в одно место и переиспользовать её между разными компонентами. Это особенно полезно, когда несколько компонентов нуждаются в одинаковом поведении: проверке аутентификации, логировании, работе с данными из хранилища.

// Простой HOC, добавляющий логирование
function withLogging<T extends object>(WrappedComponent: React.ComponentType<T>) {
  return function LoggedComponent(props: T) {
    console.log('Рендер компонента:', WrappedComponent.displayName);
    return <WrappedComponent {...props} />;
  };
}

Типичные сценарии применения

Защита маршрутов (авторизация):

function withAuth<T extends object>(WrappedComponent: React.ComponentType<T>) {
  return function AuthGuard(props: T) {
    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

    if (!isAuthenticated) {
      return <Navigate to="/login" replace />;
    }

    return <WrappedComponent {...props} />;
  };
}

// Использование
const ProtectedDashboard = withAuth(Dashboard);

Добавление данных из внешнего источника:

function withUser<T extends { user?: User }>(WrappedComponent: React.ComponentType<T>) {
  return function WithUserComponent(props: Omit<T, 'user'>) {
    const user = useCurrentUser();
    return <WrappedComponent {...(props as T)} user={user} />;
  };
}

Важные правила при написании HOC

1. Не мутировать оригинальный компонент — всегда возвращать новый
2. Пробрасывать все props через {...props}, чтобы не потерять интерфейс компонента
3. Устанавливать displayName для читаемой отладки в React DevTools
4. Не использовать HOC внутри render — это приведёт к постоянному пересозданию компонента

function withFeature<T extends object>(WrappedComponent: React.ComponentType<T>) {
  function EnhancedComponent(props: T) {
    return <WrappedComponent {...props} />;
  }

  // Устанавливаем displayName для DevTools
  EnhancedComponent.displayName = `withFeature(${WrappedComponent.displayName || WrappedComponent.name})`;

  return EnhancedComponent;
}

HOC vs Hooks

С появлением хуков в React 16.8 многие задачи, которые раньше решались HOC, теперь решаются с помощью кастомных хуков. Хуки проще в отладке, не создают лишних обёрток в дереве компонентов и не имеют проблем с коллизиями имён props. Однако HOC по-прежнему актуальны для:

• Компонентов на классах, где хуки недоступны
• Случаев, когда нужно условно рендерить компонент целиком
• Интеграции со сторонними библиотеками (например, connect из React-Redux)

Композиция HOC

HOC можно комбинировать, создавая цепочки:

const EnhancedComponent = withAuth(withLogging(withUser(MyComponent)));
// Или через compose из Redux / Ramda
const enhance = compose(withAuth, withLogging, withUser);
const EnhancedComponent = enhance(MyComponent);