---
sidebar_position: 6
---

# Что такое HOC

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

## Основные идеи HOC:
1. **Принимает компонент и возвращает новый компонент:**
   - HOC не изменяет оригинальный компонент, а создает новый, оборачивая его и добавляя новую функциональность.
2. **Используется для повторного использования логики:**
   - HOC позволяет вынести общую логику (например, загрузку данных, управление состоянием, логику авторизации) в отдельную функцию, которую можно применять к разным компонентам.
3. **Не изменяет оригинальный компонент:**
   - HOC создает новый компонент, оставляя оригинальный неизменным.

## Преимущества HOC:
1. Повторное использование кода:
   - Логика загрузки данных, управление состоянием и другие общие задачи могут быть вынесены в HOC и использованы в разных компонентах.
2. Разделение ответственности:
   - Компоненты остаются простыми и сосредоточены только на отображении данных, а HOC отвечает за логику.
3. Гибкость:
   - HOC можно комбинировать, создавая сложные цепочки функциональности.

## Недостатки HOC:
1. Сложность отладки:
   - HOC добавляют уровень вложенности в дерево компонентов, что может усложнить отладку.
2. Проблемы с именованием пропсов:
   - Если несколько HOC передают одинаковые пропсы, могут возникнуть конфликты.
3. Усложнение кода:
   - Чрезмерное использование HOC может сделать код менее читаемым и понятным.

## Альтернативы HOC:

С появлением хуков (например, `useState`, `useEffect`, `useContext`), многие задачи, которые раньше решались с помощью HOC, теперь можно реализовать с помощью пользовательских хуков. Это часто делает код более понятным и менее сложным.

## Когда использовать HOC:
- Если вам нужно добавить одну и ту же логику к нескольким компонентам.
- Если вы работаете с классовыми компонентами (хуки доступны только в функциональных компонентах).
- Если вы предпочитаете паттерн декоратора.

В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.

## Пример

💥 Логгируем входящие props

```jsx
import React from 'react';

// HOC: принимает компонент и возвращает новый
function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Props:', props);

    // можно добавить любую доп. логику
    return <WrappedComponent {...props} />;
  };
}

// Базовый компонент
function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Оборачиваем в HOC
const HelloWithLogger = withLogger(Hello);

// Использование
export default function App() {
  return <HelloWithLogger name="Tomas" />;
}
```
🔍 Что здесь происходит:
1. `withLogger` — это HOC, который принимает компонент `WrappedComponent`.
2. Он возвращает новый компонент `WithLogger`, который:
   - Логирует входящие props; 
   - Рендерит исходный компонент, передавая ему те же `props`.
3. В итоге `HelloWithLogger` ведёт себя как `Hello`, но с дополнительной функциональностью (логированием).


💥 HOC для аутентификации

```tsx 
function withAuth<P extends object>(
  WrappedComponent: React.ComponentType<P>
) {
  return function WithAuthHOC(props: P & { isAuthenticated: boolean }) {
    if (!props.isAuthenticated) {
      return <div>Доступ запрещён. Войдите в систему.</div>;
    }
    return <WrappedComponent {...props} />;
  };
}
```

🚀 **_Источник: DeepSeek_**