A Short Synopsis of Higher Order Components

Yo, so there are these things called Higher Order Components, or HOC’s for short.Higher order components are a React Pattern for providing reusable logic/state to other components. In brief, higher order components are functions that return components. Before we cover higher order components, let’s do a brief review of a similar feature found in Vanilla JS, higher order functions. Higher order functions are functions that return functions. Let’s do an example.

function multiply(x, y) {
return x * y
}

Here we have a regular javascript function that multiplies two numbers. Simple enough right? Let’s consider the fact that if we’d like to multiply other numbers we’d need to call ```multiply``` several times for each of those operations. However, let’s consider a way to abstract this functionality of multiplying two numbers.

function createMultiplier(x, callback) {
return function (y) {
return callback(x, y)
}
}

Behold, our first higher order function! It is a function that takes in a function as an argument and then returns a function with enhanced logic.

With our higher order function we can now create other functions that multiply two numbers of our specific intent.

const multiplyByTwo = createMultiplier(2, multiply)
const multiplyByFive = createMultiplier(5, multiply)
const multiplyByTen = createMultiplier(10, multiply)
// Calling our functions: 
multiplyByTwo(4) // 8
multiplyByFive(5) // 25
multiplyByTen(8) // 80

With React, we can perform the same kind of functional encapsulation using Higher Order Components. Essentially, we will be creating functions that will return react components with extended logic. How cool is that?! Let’s take for example, the idea that we could extend the default “theme” of a particular piece of our application, maybe a button for example. How could we accomplish this? Well, we could first begin by using our knowledge of the fact that some components are actually just functions. Knowing this, we could script a function that returns a class component and pass any piece of logic as a prop to that component. In our case, this prop would be an additional “theme” or “setting” to extend an original component.

function withTheme(Component, theme) {
return class WithTheme extends React.Component {
render() {
return <Component theme={theme} />
}
}
}

Being that we wish to extend the functionality of a button within our application, let’s build a stateless functional component that returns a button. Notice our button receives props, and uses the “theme” prop to change the color of the button’s text.

const Button = function(props) {
return <button style={{ color: props.theme }}>Press Me Baby!</button>
}

Now that we have our High Order Component (HOC) that extends the theme of any particular part of our application via props, let’s generate new buttons using our “withTheme” component generator.

const ButtonWithGreenTheme = withTheme(Button, ‘green’)
const ButtonWithBlueTheme = withTheme(Button, ‘blue’)
const ButtonWithRedTheme = withTheme(Button, ‘red’)

Sweet! And that’s it. You’ve now created an extensible piece of UI that can alter pieces of your application at will. Image other instances where this could be quite helpful. Maybe you’d like to extend the theme of your app from “light mode” to “dark mode” or maybe you’d like to extend some functionality of a table, menu, or chart. Whatever the case, the possibilities are endless.

If you’d like to learn more about HOC’s or high order components, please give Tyler McGinnis’ blog article a read. It’s solid, and it provides great examples on the topic. That’s all for now, thanks for reading!