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

What about getting access to the props of ComponentToDebug before returning the new component?. Is that possible?

@dmmarmol yes, that's what the "props" argument contains. they're just passed through using the spread operator ...props.

Thanks for the reference.

Just a note, if you use anonymous functions (i.e., those that you declare implicitly or on the fly) then that function will be named <Unknown/> by React. This is immediately evident if you are debugging using React tools.

The work around for this is to either name your class even when you are declaring it inline, like the example below. Of course you could just declare the ComponentNamedDebug class elsewhere and supply it to the DebugComponent function yourself.

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

In order to have named inline functional presentational components, you can do the following.

const LayoutHoC = (Component) => {
  const Layout = props => (
    <div className="app">
      <header>
        <h1>Header goes here</h1>
      </header>
      <main>
        <Component {...props} />
      </main>
    </div>
  )

  return Layout
}

I am not sure if this improves readability in any way, but it's there. Alternatively, if you want to use normal functions, here is how you can do it.

function LayoutHoC(ComponentBeingWrapped) {
  function Layout(props) {
    return (
      <div className="app">
        <header>
          <h1>Header goes here</h1>
        </header>
        <main>
          <ComponentBeingWrapped {...props} />
        </main>
      </div>
    )
  }

  return Layout
}

Can I pass multiple Components into the HOC? If so how?

@yaakovbeiss just pass additional argument to function

can i wrap an HOC in another HOC,Is it valid?

@adnan1naeem yes. You can do this. In fact, a HOC returns a component (you can render or pass it to another HOC).
As a reference, take a look into Recompose. It does this a lot (https://github.com/acdlite/recompose)