HOC (Higher-Order Component) в React: что это и примеры

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

Это паттерн переиспользования кода в React — он позволяет оборачивать базовые компоненты, расширяя их функциональность без изменения исходного кода.

Синтаксис

const withExtraLogic = (WrappedComponent) => {
  return function EnhancedComponent(props) {
    // Дополнительная логика
    return <WrappedComponent {...props} />;
  };
};

Пример HOC: логирование пропсов

function withLogger(WrappedComponent) {
  return function LoggerComponent(props) {
    console.log("Props:", props);
    return <WrappedComponent {...props} />;
  };
}

const Hello = ({ name }) => <h1>Привет, {name}</h1>;

const HelloWithLogger = withLogger(Hello);

// Использование
<HelloWithLogger name="Мир" />;

При каждом рендере вы увидите в консоли текущие пропсы, переданные в компонент.

Где применяются HOC

Часто используются для:

• Авторизации (оборачивание компонентов, доступных только авторизованным)
• Подключения к Redux (connect)
• Оборачивания layout'ов (например, с темами, языками)
• Добавления общих обработчиков или side-effect'ов

Важно помнить

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

Пример HOC с useEffect

function withFetch(WrappedComponent, url) {
  return function ComponentWithData(props) {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch(url)
        .then((res) => res.json())
        .then(setData);
    }, [url]);

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

Теперь любой компонент можно обернуть в withFetch, чтобы получить данные из API.