Объяснение Higher Order Components (HOC) в React.js

Популярный паттерн в библиотеке react.js HOC. Компонент высшего порядка работает очень похоже как HOF (функция высшего порядка), но передается для HOC аргумент в виде компонента. Один из способов переиспользования компонентов. Посмотрим пример:

// HOC компонент, универсально работающий для обычного выводящего текста компонента и выводящего инпут (ниже)
function withHover(WrappedComponent) {
  return function (props) {
    const [isHovered, setHovered] = useState(false);

    function handleMouseEnter() {
      setHovered(true);
    }

    function handleMouseLeave() {
      setHovered(false);
    }

    return (
      <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        <WrappedComponent {...props} isHovered={isHovered} />
      </div>
    );
  };
}

// Обычный компонент, принимающий текст и состояние Hovered
const TextComponent = ({ text, isHovered }) => {
  return (
    <>
      <p style={{ backgroundColor: isHovered ? "blue" : "white" }}>{text}</p>
    </>
  );
};

// Обычный компонент, принимающий nbg bygenf и состояние Hovered
const InputComponent = ({ type, isHovered }) => {
  return (
    <input
      type={type}
      style={{ backgroundColor: isHovered ? "blue" : "white" }}
    />
  );
};

// Создаем с помощью HOC 2 компонента
const TextComponentWithHover = withHover(TextComponent);
const InputComponentWithHover = withHover(InputComponent);

// И выводим в приложении 
const App = () => {
  return (
    <div className="App">
      <TextComponentWithHover
        text="Текст Loremru"
      />

      <InputComponentWithHover type="text" />
    </div>
  );
};

export default App;