React Higher Order Components

You might be familiar with Higher Order Functions in JavaScript. Those are functions that accept functions as arguments, and/or return functions.

Two examples of those functions are Array.map() or Array.filter().

In React, we extend this concept to components, and so we have a Higher Order Component (HOC) when the component accepts a component as input and returns a component as its output.

In general, higher order components allow you to create code that’s composable and reusable, and also more encapsulated.

We can use a HOC to add props to a component, wrap markup around it, or connect it to something outside, for example a Redux store.

You might want to use Higher Order Components when you want to enhance an existing component, operate on the state or props, or its rendered markup.

There is a convention of prepending a Higher Order Component with the with string (it’s a convention, so it’s not mandatory), so if you have a Button component, its HOC counterpart should be called withButton.

HOCs still work in React 19, and you’ll meet them in older codebases (Redux’s connect() is the classic example). For sharing logic though, a custom hook is usually simpler, because you call it inside the component instead of wrapping the component in another one. A HOC is still the right tool when you need to wrap markup around a component, or inject props into a component you don’t control.

Let’s create one.

The simplest example ever of a HOC is one that returns the component unaltered:

const withElement = Element => props => <Element {...props} />

Let’s make this a little bit more useful and add a property to that element, in addition to all the props it already came with, the color:

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

We use this HOC in a component JSX:

const Button = ({ color, children }) => {
  return <button style={{ color }}>{children}</button>
}

const ColoredButton = withColor(Button)

and we can finally render the wrapped button in our app JSX:

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

ColoredButton is still a normal component. The HOC spreads your props first and sets color="red" after them, so the red wins even if you pass <ColoredButton color="blue">. Swap the order (<Element color="red" {...props} />) if you want the caller to be able to override the default.

React 19 also made ref a regular prop on function components, which helps here. If someone renders <ColoredButton ref={buttonRef}>, the {...props} spread passes the ref down to Button like any other prop, and Button can put it on its <button> element. Before React 19 you had to wrap the HOC in forwardRef for that to work.

This is a very simple example but hopefully you can get the gist of HOCs before applying those concepts to more complex scenarios.

Want me to talk about your product? You can sponsor this site.