Exploring Higher-Order Components In React

Christopher Yuan
Nov 2 · 1 min read

React is a great framework for front-end development. It introduces a modular and reusable component-based paradigm that gives structure and composure to building client-side interfaces. An advanced concept in React is the use of higher-order components (HOC).

Simply put, a HOC is a function that takes in a component as an argument and returns a new component.

function higherOrderComponent(Component) {
return class extends React.Component {
render() {
return <Component />
}
}}

In this example of a HOC, the function accepts a component as an argument. The component will be rendered by the returned class component.

class sayHello {
render() {
return <div>Hello, World!</div>
}
}
const wrappedComponent = higherOrderComponent(sayHello);

If we take sayHello, a class component that renders Hello, World!, and wrap it in higherOrderComponent. We can store the return value in wrappedComponentand it will render Hello, World!.

The fact that you can wrap a component within a higher-order component opens up opportunities to abstract components that share similar functionalities. This makes it possible to reuse component logic and not have to repeat code in many places in your project.

Look out for my next blog on applying this information to a practical situation.

Thanks for reading. You can refer to the React documentation for more.

Christopher Yuan

Written by

Software Engineer | Building Things and Learning Along the Way

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade