The Higher Order Component (HOC) pattern is used frequently in React libraries, so it's worth knowing. Below I'm going to show you what a HOC is, how to use one, and how to create your own.

The Higher Order Component pattern reduces the amount of repetitive code you write as your app grows. A Higher Order Component provides common functionality that other components reuse.

The Higher Order Component (HOC) pattern is used frequently in React libraries, so they're worth learning. 

When we talk about a “higher order” function, what does “order” even mean? Let’s look at a simple function first:

function increment(a: number): number {
  return a + 1
}

 and returns the sum of this number and 

. It is a normal, first-order function because it takes “normal” values as arguments and returns a normal value.

function twice(fn: Function): Function {
  return function (...args: any[]) {
    return fn(fn(...args))
  }
}

const incrementTwice = twice(increment)
// incrementTwice is a _function_ !
incrementTwice(1) // => 3

// or more concisely
twice(increment)(1) // => 3

So the idea with a higher-order function is that we 

 carry the same idea, but in the realm of React components.

A Higher Order Component is a function that takes a 

Let’s see what a higher order component looks like in practice.

First, look at this pseudocode of a higher order component. The higher order component takes a component, transforms it, and returns a new component.

In code, that means we structure it like this:

// Assume `SomeComponent` is just a regular 
// React component.  We will transform it
// using a higher order component
const SomeComponent = /* ... */

// Below is our higher order component. 
// It's just a function. However, it returns 
// a component when it's run
const higherOrderComponent = 
  (InputComponent) => {
    // do stuff
    // ...
    // return a component
    return OutputComponent
  }

// We use our HOC like this:
const NewComponent = higherOrderComponent(
  SomeComponent
)

If you are struggling to wrap your head around how this works, remember our definition:

A higher order component is a component/function that takes any component and returns another component - with modified functionality.

For our next example, say we want to build a component to syntax highlight code in multiple languages - and support a dark mode.

// JSCodeSnippet.tsx
import React from "react";

// Define types for the props
interface JSCodeSnippetProps {
  codeSample: object;
}

// Here is our component
function JSCodeSnippet(
  props: JSCodeSnippetProps
) {
  return (
    <div>
      <h3>JavaScript Code Example</h3>
      {props.codeSample}
    </div>
  );
}

// Make the component available
// for import by other code
export default JSCodeSnippet;

// PythonCodeSnippet.tsx
import React from "react";

// Define types for the props
interface PythonCodeSnippetProps {
  codeSample: object;
}

// Here is our component
function PythonCodeSnippet(
  props: PythonCodeSnippetProps
) {
  return (
    <div>
      <h3>Python Code Example</h3>
      {props.codeSample}
    </div>
  );
}

// Make the component available
// for import by other code
export default PythonCodeSnippet;

These components print out code snippets (

). Say, that we want to support a “night mode”, so that it’s easier to read at night.

To keep it simple, all our “night mode” is going to do is add a 

This is what the component will look like:

// withNightMode.tsx
import React from 'react'

// Define types  
interface CodeComponentProps {
  codeSample: object
}

// This is our higher order component
// it takes a component, named WrappedComponent
// its return value is, likewise, a component
const withNightMode = (WrappedComponent: any) => 
  (props: CodeComponentProps) => {
    return(
      <div style={{backgroundColor: 'wheat'}}>
        <WrappedComponent {...props} />
      </div>
    )
  }

// Make the higher order component available for 
// import by other code
export default withNightMode

, adds new styling with a slightly darker background by adding a 

Well, that’s not exactly true: we only want to pass components that “conform” to the type of props that our HOC can work with. Thankfully, we can do that with TypeScript. There’s not room to show it here, but we do show it in detail in 

 as the result. Hence the term, “Higher Order Component”.

Below, we use the component that is returned by our High Order Component function:

// App.tsx
// ...
const PythonCodeSnippetWithNightMode = 
  withNightMode(
    PythonCodeSnippet
  );
const JSCodeSnippetWithNightMode = 
  withNightMode(
    JSCodeSnippet
  );

return (
  <div className="container">
    <div className="row">
      <div className="col-6 col-offset-3">
        <h2>Browse Code</h2>
        <JSCodeSnippet codeSample={jsCode} />
        <JSCodeSnippetWithNightMode
          codeSample={jsCode}
        />
        <PythonCodeSnippet codeSample={pyCode} />
        <PythonCodeSnippetWithNightMode
          codeSample={pyCode}
        />
      </div>
    </div>
  </div>
);

You can try it out in this Code Sandbox 👆

In the code above, we use the higher order component 

 to transform our input components into versions that display with a “Night Mode” style.

What’s cool is that we did not have to code this behavior in the components themselves. Rather, we made a higher order component that applies this behavior to any component we pass it.

Of course, Higher Order Components can get more complicated. You definitely want to use 

 to ensure that your HOC and the components themselves are compatible. And we show some detailed examples of how to do that in 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">wtf are Higher Order Components?</h1><div data-node-type="summary" class="summary-block">The Higher Order Component (HOC) pattern is used frequently in React libraries, so it's worth knowing. Below I'm going to show you what a HOC is, how to use one, and how to create your own.</div><p>The Higher Order Component pattern reduces the amount of repetitive code you write as your app grows. A Higher Order Component provides common functionality that other components reuse.</p><p style="line-height: 1.3125em;">The Higher Order Component (HOC) pattern is used frequently in React libraries, so they're worth learning. </p><h2><a name="higher-order-functions" id="higher-order-functions">Higher Order Functions</a></h2><p style="line-height: 1.3125em;">When we talk about a “higher order” function, what does “order” even mean? Let’s look at a simple function first:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-DAS9X" id="cm-DAS9X">function increment(a: number): number {
  return a + 1
}</textarea><p style="line-height: 1.3125em;">Function&nbsp;<code>increment()</code>&nbsp;is a regular function that takes a&nbsp;<code>number</code>&nbsp;and returns the sum of this number and&nbsp;<code>1</code>. It is a normal, first-order function because it takes “normal” values as arguments and returns a normal value.</p><p style="line-height: 1.3125em;">A&nbsp;<em>higher order</em>&nbsp;function, is a function that either:</p><ol><li><p>accepts a&nbsp;<em>function</em>&nbsp;as an argument or</p></li><li><p>returns a&nbsp;<em>function</em>&nbsp;as a result</p></li></ol><p style="line-height: 1.3125em;">(or both).</p><p style="line-height: 1.3125em;">Consider the following:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-WWsSU" id="cm-WWsSU">function twice(fn: Function): Function {
  return function (...args: any[]) {
    return fn(fn(...args))
  }
}</textarea><p style="line-height: 1.3125em;">Function&nbsp;<code>twice()</code>&nbsp;is a function that takes another&nbsp;<em>function</em>&nbsp;as an argument and returns a&nbsp;<em>function</em>&nbsp;as a result—that makes it a&nbsp;<em>higher order function</em>.</p><p style="line-height: 1.3125em;">We’d use it like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-kOWWN" id="cm-kOWWN">const incrementTwice = twice(increment)
// incrementTwice is a _function_ !
incrementTwice(1) // =&gt; 3

// or more concisely
twice(increment)(1) // =&gt; 3</textarea><p style="line-height: 1.3125em;">So the idea with a higher-order function is that we&nbsp;<strong>generate a new function</strong>&nbsp;that has&nbsp;<strong>new abilities</strong>&nbsp;based on the original function.</p><p style="line-height: 1.3125em;">Higher Order&nbsp;<em>Components</em>&nbsp;carry the same idea, but in the realm of React components.</p><h2><a name="definition-of-a-higher-order-component" id="definition-of-a-higher-order-component">Definition of a&nbsp;<em>Higher Order Component</em></a></h2><p style="line-height: 1.3125em;"><em>A Higher Order Component is a function that takes a&nbsp;</em><strong><em>component</em></strong><em>&nbsp;as an argument and returns another&nbsp;</em><strong><em>component</em></strong><em>&nbsp;as a result of some processing.</em></p><p style="line-height: 1.3125em;">Let’s see what a higher order component looks like in practice.</p><h2><a name="pseudocode-of-a-higher-order-component" id="pseudocode-of-a-higher-order-component">Pseudocode Of A Higher Order Component</a></h2><p style="line-height: 1.3125em;">First, look at this pseudocode of a higher order component. The higher order component takes a component, transforms it, and returns a new component.</p><p style="line-height: 1.3125em;">In code, that means we structure it like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-mLlGX" id="cm-mLlGX">// Assume `SomeComponent` is just a regular 
// React component.  We will transform it
// using a higher order component
const SomeComponent = /* ... */

// Below is our higher order component. 
// It's just a function. However, it returns 
// a component when it's run
const higherOrderComponent = 
  (InputComponent) =&gt; {
    // do stuff
    // ...
    // return a component
    return OutputComponent
  }

// We use our HOC like this:
const NewComponent = higherOrderComponent(
  SomeComponent
)</textarea><p style="line-height: 1.3125em;">The result of applying&nbsp;<code>higherOrderComponent</code>&nbsp;to&nbsp;<code>SomeComponent</code>&nbsp;is the new component,&nbsp;<code>NewComponent</code>.</p><p style="line-height: 1.3125em;">If you are struggling to wrap your head around how this works, remember our definition:</p><p style="line-height: 1.3125em;"><strong>A higher order component is a component/function that takes any component and returns another component - with modified functionality.</strong></p><h2><a name="a-simple-higher-order-component" id="a-simple-higher-order-component">A Simple Higher Order Component</a></h2><p style="line-height: 1.3125em;">For our next example, say we want to build a component to syntax highlight code in multiple languages - and support a dark mode.</p><p style="line-height: 1.3125em;">This is what our components look like:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-lcrcL" id="cm-lcrcL">// JSCodeSnippet.tsx
import React from "react";

// Define types for the props
interface JSCodeSnippetProps {
  codeSample: object;
}

// Here is our component
function JSCodeSnippet(
  props: JSCodeSnippetProps
) {
  return (
    &lt;div&gt;
      &lt;h3&gt;JavaScript Code Example&lt;/h3&gt;
      {props.codeSample}
    &lt;/div&gt;
  );
}

// Make the component available
// for import by other code
export default JSCodeSnippet;</textarea><p style="line-height: 1.3125em;">and</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ThVWA" id="cm-ThVWA">// PythonCodeSnippet.tsx
import React from "react";

// Define types for the props
interface PythonCodeSnippetProps {
  codeSample: object;
}

// Here is our component
function PythonCodeSnippet(
  props: PythonCodeSnippetProps
) {
  return (
    &lt;div&gt;
      &lt;h3&gt;Python Code Example&lt;/h3&gt;
      {props.codeSample}
    &lt;/div&gt;
  );
}

// Make the component available
// for import by other code
export default PythonCodeSnippet;</textarea><p style="line-height: 1.3125em;">These components print out code snippets (<code>codeSample</code>). Say, that we want to support a “night mode”, so that it’s easier to read at night.</p><p style="line-height: 1.3125em;">To keep it simple, all our “night mode” is going to do is add a&nbsp;<code>backgroundColor</code>&nbsp;of&nbsp;<code>wheat</code>.</p><p style="line-height: 1.3125em;">This is what the component will look like:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-RKej9" id="cm-RKej9">// withNightMode.tsx
import React from 'react'

// Define types  
interface CodeComponentProps {
  codeSample: object
}

// This is our higher order component
// it takes a component, named WrappedComponent
// its return value is, likewise, a component
const withNightMode = (WrappedComponent: any) =&gt; 
  (props: CodeComponentProps) =&gt; {
    return(
      &lt;div style={{backgroundColor: 'wheat'}}&gt;
        &lt;WrappedComponent {...props} /&gt;
      &lt;/div&gt;
    )
  }

// Make the higher order component available for 
// import by other code
export default withNightMode</textarea><p style="line-height: 1.3125em;">Our higher order component,&nbsp;<code>withNightMode</code>, adds new styling with a slightly darker background by adding a&nbsp;<code>div</code>&nbsp;around&nbsp;<code>WrappedComponent</code>.</p><p style="line-height: 1.3125em;">What is&nbsp;<code>WrappedComponent</code>?&nbsp;<em>Any component we want!</em></p><blockquote class=""><p style="line-height: 1.6em;"><em>Well, that’s not exactly true: we only want to pass components that “conform” to the type of props that our HOC can work with. Thankfully, we can do that with TypeScript. There’s not room to show it here, but we&nbsp;do&nbsp;show it in detail in&nbsp;<a href="https://newline.co/fullstack-react-with-typescript" rel="noopener noreferrer nofollow">Fullstack React with TypeScript</a></em></p></blockquote><p style="line-height: 1.3125em;">We pass&nbsp;<code>WrappedComponent</code>&nbsp;in as an&nbsp;<em>argument</em>&nbsp;and&nbsp;<em>return a new component</em>&nbsp;as the result. Hence the term, “Higher Order Component”.</p><h2><a name="using-the-returned-component" id="using-the-returned-component">Using The Returned Component</a></h2><p style="line-height: 1.3125em;">Below, we use the component that is returned by our High Order Component function:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-dr6z2" id="cm-dr6z2">// App.tsx
// ...
const PythonCodeSnippetWithNightMode = 
  withNightMode(
    PythonCodeSnippet
  );
const JSCodeSnippetWithNightMode = 
  withNightMode(
    JSCodeSnippet
  );

return (
  &lt;div className="container"&gt;
    &lt;div className="row"&gt;
      &lt;div className="col-6 col-offset-3"&gt;
        &lt;h2&gt;Browse Code&lt;/h2&gt;
        &lt;JSCodeSnippet codeSample={jsCode} /&gt;
        &lt;JSCodeSnippetWithNightMode
          codeSample={jsCode}
        /&gt;
        &lt;PythonCodeSnippet codeSample={pyCode} /&gt;
        &lt;PythonCodeSnippetWithNightMode
          codeSample={pyCode}
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
);</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fxqsqt&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fxqsqt&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fxqsqt%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>You can try it out in this Code Sandbox 👆</p><p style="line-height: 1.3125em;">In the code above, we use the higher order component&nbsp;<code>withNightMode</code>&nbsp;to transform our input components into versions that display with a “Night Mode” style.</p><p style="line-height: 1.3125em;">What’s cool is that we did not have to code this behavior in the components themselves. Rather, we made a higher order component that applies this behavior to any component we pass it.</p><p style="line-height: 1.3125em;">Of course, Higher Order Components can get more complicated. You definitely want to use&nbsp;<em>types</em>&nbsp;to ensure that your HOC and the components themselves are compatible. And we show some detailed examples of how to do that in&nbsp;<a href="https://newline.co/fullstack-react-with-typescript" rel="noopener noreferrer nofollow">Fullstack React with TypeScript</a>.</p><figure class="photo figure-position-inline"><a href="https://newline.co/fullstack-react-with-typescript" contenteditable="true"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201023152748844_hero.jpg" attachmentid="a760f258-ca84-4327-a7d6-05bc2406ecc7" contenteditable="false" data-width="600" data-height="356"></a><div></div></figure><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

wtf are Higher Order Components?

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript