Higher Order Components Hoc

HOC fundamentally is just a function that accepts a Component and returns a Component:
(component) => {return componentOnSteroids; } or just component => componentOnSteroids;
Let's assume we want to wrap our components in another component that is used for debugging purposes,
it just wraps them in a DIV with "debug class on it".
Below ComponentToDebug is a React component.

//HOC using Class
  //it's a function that accepts ComponentToDebug and implicitly returns a Class

let DebugComponent = ComponentToDebug => class extends Component {
  render() {
    return (
      <div className="debug">
        <ComponentToDebug {...this.props}/>
      </div>
    );
  }
};

//similar HOC using pure function 
//it's a function that accepts ComponentToDebug and explicitly returns a Functional component 

let DebugComponent = (ComponentToDebug) => {
  return (props) => (
    <div className="debug">
      <ComponentToDebug {...props}/>
    </div>
  );
};

//above component can be simplified omitting extra () around parameters and using implicit return

let DebugComponent = ComponentToDebug => (
  props => (
    <div className="debug">
      <ComponentToDebug {...props}/>
    </div>
  )
);

//or even further omitting extra ()
let DebugComponent = ComponentToDebug => props => (
  <div className="debug">
    <ComponentToDebug {...props}/>
  </div>
);

//finally any definition can be used like that:
DebugComponent(MyComponent);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License