Use case for Higher-Order Components in React?

Question

The tutorial about component composition at the official react.js describes how to use composition to avoid inheritance and for the most part I see the advantage here.
But the website also mentions we haven’t found any use cases where we would recommend creating component inheritance hierarchies
src: https://reactjs.org/docs/composition-vs-inheritance.html

But then we have a tutorial about HOC (Higher-Order Component) pattern
src: https://reactjs.org/docs/higher-order-components.html
Which suggests writing functions for generating composite components as a means to avoid duplicate logic.
This pattern is also used in Relay for components that work with GraphQL.

For someone coming from a C# / Java / PHP background their HOC use cases look like obvious examples of when to use inheritance. Which is what I previously did myself in React and find it to be very intuitive and more importantly easy for debugging.

I'm also struggling to understand the advantage of generator functions used in HOC over regular composite components, which take inner components via props.

So my question is: Is there a use case for HOC in React which couldn't be as easily solved either by composition or inheritance instead?

Examples would be appreciated.

Update: Found this article about Inheritance Inversion which suggests having your wrapper class inherit from your inner class and calling it's render() method.
I might be biased so I wont discard this idea right away, since it might have practical usage, but I will have to look more into it first.
If you have an idea of when this could beat regular composition or inheritance please leave a comment or perhaps an answer if you think you have a good case.

Answer 1

For those who came from any Object-oriented Language like Java it is important to take into account that Javascript is a prototype-based language meaning that object properties and methods can be shared through generalized objects that have the ability to be cloned and extended. This is known as prototypical inheritance and differs from class inheritance. In Javascript, too much inheritance can lead to endless confusion, and endless pain when you try to debug such code and also affect performance, that is why if you read Facebook’s article

• https://reactjs.org/docs/composition-vs-inheritance.html at the very bottom you will read:

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies

Said this, we should not mix the concept of two different patterns like HOC and Composition. They have different use cases.

---

A higher-order component (HOC) is an advanced technique in React for reusing component logic. By reading at the example on:

• https://reactjs.org/docs/higher-order-components.html

it could seem a pattern used like obvious examples of when to use inheritance but it is not. Logic involved in a HOC is not only that.

Some Examples

• React-Redux uses a HOC called connect to map store state to props
• React-Router’s withRouter HOC provides route context to components needing access to history APIs

---

Is there a use case for HOC in React which couldn't be as easily solved either by composition or inheritance instead?

I would say to always avoid inheritance and based on your needs to go for either Composition or HOC by taking into account that if you go for Composition you have at least to try following common rules like:

• Divide components into stateful “Composed” and stateless “Components”.
• If two components need access to the same state, move the state into their common parent. https://reactjs.org/docs/lifting-state-up.html

An Example:

class Composed extends React.Component {
      state = { 
         value: 'foo'
      }
      changeValue = value => this.setState({value})
      render() {
            <div>
              <Component1 value={this.state.value} changeValue={this.changeValue} />
              <Component2 value={this.state.value} />
            <div>
      }
}

---

Hope to have helped.