Какую проблему решает использование HOC, если множество компонентов содержат одинаковую бизнес-логику?

Что такое HOC и какую проблему он решает?

Higher-Order Component (HOC) — это паттерн в React, который позволяет переиспользовать логику между компонентами. Если множество компонентов содержат одинаковую бизнес-логику, например, загрузку данных из API, проверку прав доступа или подписку на события, то без HOC пришлось бы дублировать эту логику в каждом компоненте. HOC решает эту проблему, выступая в роли обертки: он принимает компонент и возвращает новый компонент с добавленными свойствами или поведением.

Как это работает?

HOC — это функция, которая принимает компонент и возвращает новый компонент. Внутри HOC можно реализовать общую логику, а затем передать данные через props в обернутый компонент. Например, если нужно добавить логику авторизации к нескольким страницам, можно создать HOC withAuth, который проверяет, авторизован ли пользователь, и либо рендерит компонент, либо перенаправляет на страницу входа.

function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const isAuthenticated = checkAuth(); // общая логика
    if (!isAuthenticated) {
      return <Redirect to="/login" />;
    }
    return <WrappedComponent {...props} />;
  };
}

const ProtectedPage = withAuth(MyPage);

Где применяется?

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

• Добавления логики подписки на данные (например, с Redux или Context)
• Обработки ошибок или загрузки
• Управления доступом (авторизация)
• Логирования или аналитики

Однако с появлением React Hooks (например, useEffect, useContext) HOC стал менее популярен, так как хуки позволяют переиспользовать логику без создания новых компонентов. Тем не менее, HOC остается полезным в легаси-коде или при работе с библиотеками, которые его требуют.

Вывод

HOC — это мощный инструмент для переиспользования логики в React, особенно когда нужно добавить одинаковое поведение к нескольким компонентам без дублирования кода. Его стоит применять в проектах, где еще не используются хуки, или при интеграции с библиотеками, которые ожидают HOC-обертки.