Understanding Higher-Order Components in React

Before I take about HOC, we will speak about why it created.
When we used the legacy system which his system need to maintain one of the techniques that used to maintain the system is a wrapper which is A wrapper, is a program which receives input messages from the client program, transforms the inputs into an internal representation, and invokes the target system with the newly formatted messages.
or simplicity, Wrapping means encapsulating the legacy component with a new software layer that provides a new interface and hides the complexity of the old component.

when it used in the react when used component that want add some feature you need wrapper the component genraral some name withNameComponet example some library as react-router-dom withRoute(nameComponet)which will add some features that related route as patch history and other another example used in the redux when I used the connect(mapStateToProps)(ViewDocument)
which simply add som feature or property in the ViewDocument.

 class Hoc extends React.Component {
   constructor(props) {
   super(props);
   this.state = { count: 0 };
 }
 update = type => {
   if (type === "Inc") {
     this.setState(({ count }) => ({ count: count + 1 }));
   } else if (type === "Dec") {
     this.setState(({ count }) => ({ count: count - 1 }));
   }
 };
 render() {
   return <Component 
     {...this.state} 
     {...this.props} 
     update={this.update} 
   />;
 }
};
``
when want used it  used this shape withCounter(component)

#Hoc #Higher-Order Components in React #javascript #react