Higher-Order Components (HOC)

Introduction

As React applications grow, you often find several components that need the same behavior — one component needs to show a spinner while data loads, another needs the same loading logic, and a third needs it too. Copy-pasting that logic into every component quickly becomes unmaintainable.

Higher-Order Components (HOCs) were one of the earliest patterns the React community adopted to solve this: a way to package up reusable logic and "wrap" it around any component that needs it, without changing that component's own code.

What is a Higher-Order Component?

A Higher-Order Component is a function that takes a component as an argument and returns a new, enhanced component. It does not modify the original component — it wraps it, adding extra props, behavior, or rendering logic around it.

The term comes from "higher-order function" in JavaScript — a function that takes or returns another function. A HOC applies that same idea to components: it is simply a function whose input and output are both components.

function withSomething(WrappedComponent) {
  return function EnhancedComponent(props) {
    // add extra logic, state, or props here
    return <WrappedComponent {...props} />;
  };
}

Building a withLoading HOC

Let's build a practical example: a HOC that shows a spinner whenever a loading prop is true, and otherwise renders the wrapped component as normal. This is a classic use case — many components that fetch data need exactly this behavior.

function withLoading(WrappedComponent) {
  return function WithLoading(props) {
    if (props.loading) {
      return (
        <div className="spinner-container">
          <div className="spinner" />
          <p>Loading...</p>
        </div>
      );
    }

    return <WrappedComponent {...props} />;
  };
}

Now we can enhance any component with loading behavior, without touching its original code:

function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

const UserProfileWithLoading = withLoading(UserProfile);

function App() {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then((data) => {
      setUser(data);
      setLoading(false);
    });
  }, []);

  return <UserProfileWithLoading loading={loading} user={user} />;
}

Loading...

(once fetchUser resolves)

Jane Doe
jane@example.com

Naming Convention

By convention, HOCs are named starting with with — withLoading, withAuth, withRouter, withTheme. This makes it immediately clear, just from the name, that the function wraps a component rather than being a component itself.

function withLoading(WrappedComponent) {
  function WithLoading(props) {
    if (props.loading) return <p>Loading...</p>;
    return <WrappedComponent {...props} />;
  }

  WithLoading.displayName = `WithLoading(${WrappedComponent.name})`;
  return WithLoading;
}

Composing Multiple HOCs

Because a HOC just takes a component and returns a component, HOCs can be nested to combine several behaviors — for example, adding both loading and authentication checks to the same component.

const EnhancedProfile = withAuth(withLoading(UserProfile));

// Equivalent to:
// withAuth(withLoading(UserProfile))
// which renders:
// <Auth check> -> <Loading check> -> <UserProfile />

HOCs vs Custom Hooks

Before Hooks existed (pre-2019), HOCs — along with render props — were the primary way to share stateful logic between components. Since custom Hooks were introduced, most new code shares logic with a Hook instead, because Hooks avoid the extra wrapper components and prop-name collisions that HOCs can introduce.

You will still encounter HOCs in some popular libraries and in legacy codebases — for example, older versions of libraries that provide connect() or withRouter() — so it is worth being able to read and understand them, even if you rarely write new ones.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Higher-Order Components let you package up reusable behavior — like showing a loading spinner — into a function that wraps any component that needs it. You built a withLoading HOC, saw the with... naming convention, and compared HOCs to the more modern custom Hook approach.

Next, you will look at Render Props, another pre-Hooks pattern for sharing logic between components, and see how it compares to both HOCs and custom Hooks.