Pulling Back the Curtain of React Higher Order Components

Jared Chamberlain
Aug 31, 2018 · 3 min read

Once you’ve got the basics of React down one of the first higher level concepts that you’ll want to learn is a Higher Order Component. These are commonly utilized in popular libraries like react-router and react-redux and understanding what’s going on will be beneficial to understanding their usage. Then once you’re understanding has matured you can start writing your own!

What is a HOC?

Since in Javascript functions are first class objects and can be passed in as arguments to a function or returned from a function, we have patterns of function creation. This is done by creating a higher order function that either or both accepts a function as an argument and/or returns a function.

And Higher Order Components are very similar in that they a function that accepts a component as an argument and returns a component. This is a very powerful tool for passing some functionality to any number of unique components.

withRouter

One of the earliest HOCs that I encountered was the withRouter function from react-router. A high level description of it may be that it provides access to the router props (history, match, location) in the component that is passed into it. But let’s look at the code

I left out some of the code above that handled imports and some of the code below handling the returning of the final component but otherwise this is the entire withRouter HOC.

So let’s break it down:

  • withRouter is written as an arrow function that accepts a component as an argument. This is the component that we pass to it when we write withRouter(Component).
  • Then we have another function being declared. This function is actually a stateless functional react component.
  • This component takes out any props that you passed to the withRouter(Component) and then returns your component with those props but it’s now wrapped in a Router component from react-router allowing those router props to be passed down.

And that’s about it. Why is this useful? It’s useful because it’s taking the action of explicitly passing the router props and abstracting it away behind this withRouter function so that you don’t have to worry about whether or not a component has them.

Creating Our Own

Now that we have an idea of how these HOCs work let’s create one that we could use in a react project.

authenticationHOC: A function that takes in a component that requires a user to be authenticated and will only render that component if there is a isAuthenticated value in our redux store

export default const authenticationHOC = Component => {
class Authenticate extends Component {
componentWillMount(){
if(!this.props.isAuthenticated)
//handle redirect/error message
}
componentWillUpdate(){
if(!this.props.isAuthenticated)
//handle redirect/error message
}
render(){
return <Component {...this.props}/>
}
const mapStateToProps = ({currentUser}) => ({isAuthenticated})
return connect(mapStateToProps)(Authenticate)
}

Here our HOC takes in a component as an argument, and returns a component that is connected to our react store with the isAuthenticated value from our state. This component that will simply render the original component if the user is authenticated or process some logic for if the user is not authenticated

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