React HOC (Higher Order Component) Example

HOC.js

/* 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);