How to Move from Consuming Higher-Order Components to React Hooks

By Lee Brandt

Let’s face it. Higher-Order Components (HOCs) allow developers to really take advantage and extend the functionality of their React components, but they can be cumbersome once you have more than one that you want to use within a component. It’s mostly because of the way they’re used. Not only do you have to use a class component in order, you use the HOC by wrapping them around your components. Wrapping the component code forces you to either end up with:

export default class withThis(withThat(withTheOther(MyComponent extends Component{
  // your stuff...

Or you can try and make it a little cleaner by:

class MyComponent extends Component{
  // your stuff...

export default withThis(withThat(withTheOther(MyComponent)));

Neither is IDEAL, but the second is definitely cleaner. It does have the problem of misleading developers into believing that there aren’t any HOC being used