A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Concretely, a higher-order component is a function that takes a component and returns a new component. It allows developers to reuse code logic in their project. It is a way to share logic across multiple components without having to rewrite it.

HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

• EnhancedComponent will be the new component
• higherOrderComponent will enhance WrappedComponent
• WrappedComponent is the one that we want to enhance

Sources:

“Higher-Order Components –.” React, reactjs.org/docs/higher-order-components.html.