React Higher Order Components: Creating Reusable and Composable Code

In the world of JavaScript programming, you might be familiar with Higher Order Functions that accept functions as arguments and/or return functions. React takes this concept and applies it to components, resulting in Higher Order Components (HOCs). HOCs are components that accept a component as input and return a component as output.

The beauty of HOCs is their ability to make your code more composable, reusable, and encapsulated. They allow you to add methods or properties to the state of a component, or even integrate with Redux stores.

When should you consider using Higher Order Components? Here are a few scenarios:

When you want to enhance an existing component
When you need to operate on the state or props of a component
When you want to modify the rendered markup of a component

To follow a naming convention, it is common to prepend the name of a Higher Order Component with the word “with”. For example, if you have a Button component, you can create an HOC called withButton.

Let’s dive into a simple example to demonstrate how HOCs work:

const withElement = Element => () => <Element />

In this basic example, the HOC simply returns the component unaltered.

Now, let’s make it more useful by adding a property to the component. In this case, we’ll add a color property:

const withColor = Element => props => <Element {...props} color="red" />

To use this HOC, you can apply it to a component:

const Button = () => {
 return <button>test</button>
}

const ColoredButton = withColor(Button)

Finally, you can render the ColoredButton component in your app:

function App() {
 return (
   <div className="App">
     <h1>Hello</h1>
     <ColoredButton />
   </div>
 )
}

This example may be simple, but it illustrates the power of HOCs. With this concept in mind, you can apply it to more complex scenarios, making your React code more flexible and maintainable.