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

Основная цель HOC — повторное использование логики между компонентами без дублирования кода.

Пример использования:

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

// Обычный компонент
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

// Оборачиваем UserList в HOC
const UserListWithLoading = withLoading(UserList);

// Использование
// <UserListWithLoading isLoading={true} users={[]} />

HOC полезны для:

Добавления состояния или логики (например, загрузка, авторизация)
Оборачивания компонентов в контекст или провайдеры
Логирования или трекинга

Однако с появлением хуков (React Hooks) многие задачи, которые решались через HOC, теперь проще реализовать через кастомные хуки.

Что такое HOC (Higher-Order Components)? Для чего используются? Приведите примеры использования HOC в React.