Приведи пример написания кастомного HOC

Ответ

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

import React from 'react';

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

// Использование
const MyComponent = ({ text }) => <div>{text}</div>;
const MyComponentWithLogger = withLogger(MyComponent);

HOC добавляет логирование при монтировании компонента. Ключевые моменты:

  1. Принимает компонент (WrappedComponent)
  2. Возвращает новый компонент (обычно классовый)
  3. Прокидывает пропсы через {...this.props}
  4. Может добавлять любую дополнительную логику (жизненный цикл, контекст и т.д.)