Higher Order Component
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. The examples of HOCs are Redux’s connect and Relay’s create Container.
Syntax:
Let see it in example:
Now I am going to create two components.
Click.js
Hover.js
In the Click Component and Hover Component we gave the logic separately. By using the HOC function we are reusing a component Click and Hover’s logic.
Click.js
Hover.js
By using the HOC method now we compined the both component's logic.
In App.js import the Click and Hover components.