Difference between using a HOC vs. Component Wrapping

Question

I just checked out HOC's in React. They are pretty cool. However, doesn't simply wrapping a component achieve the same result?

Higher Order Component

This simple HOC passes state as properties to the ComposedComponent

const HOC = ComposedComponent => class extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (<ComposedComponent {...this.state} />);
    }      

}

Component Wrapping

This component passes state as properties to the child component

class ParentComponent extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (
        <div>
          {React.cloneElement(this.props.children, { ...this.state })}  
        </div>
      );
    }      

}

Although usage is slightly different between the two, they both seem to be equally as reusable.

Where is the real difference between HOC's and composing components via this.props.children? Are there examples where you can only use one or the other? It is a better practice to use HOC's. Are these just choices that you have where you get to pick your preferred flavor?

Answer 1

Higher-Order Components (HOC) and Container Components are different. They have different use cases and solve similar, but different problems.

HOC are like mixins. They are used to compose functionality that the decorated component is aware of. This is opposed to Container Components that wrap children and allow the children to be dumb (or not aware of the Container's decorated functionality).

It is true when transferring props, that Containers can add functionality to their children. But, this is usually in the form of props being passed down to the children. In Containers, this is also awkward because of the limitation that you cannot simply add props to an already created Element:

So, if you wanted to add a new prop to a child from this.props.children, you would have to use cloneElement. This is not as efficient because it means you have to re-create the elements.

Also, HOC is simply a way (factory) for creating Components. So, this can happen outside the render.

Answer 2

I just wanted to add that when you need to dynamic higher order components the Container approach works better.

If you e.g have 4 elements to render that could have a HOC defined, you would like to create the Higher Order Component inside render, but since calling higher order components inside render causes the <HigherOrderComponent/>'s to remount on every render this becomes a very bad Idea.

This is documented here; https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method.

But in general I would go for the HOC approach.