The higher-order component (HOC) in React?

• React 16.8 introduces the concept of higher-order components.
• A higher-order component is a function that takes a component and returns a new component. A higher-order component (HOC) is the advanced technique in React.js for reusing a component logic.
• Higher-Order Components are not part of the React API. They are the pattern that emerges from React’s compositional nature.
• The component transforms props into UI, and a higher-order component converts a component into another component.
• HOCs are common in third-party React Libraries.
• Do not use HOCs inside the render method of a component.
• HOCs does not work for refs as ‘Refs’ does not pass through as a parameter or argument.
• If you add a ref to an element in the HOC component, the ref refers to an instance of the outermost container component, not the wrapped component.

Syntax:

const EnhancedComponent = higherOrderComponent(OriginalComponent);

Reason to use Higher-Order component:
1 Easy to handle
2 Get rid of copying the same logic in every component
3 Makes code more readable

For Example visit : https://github.com/sagarramu/react-higher-order-component