Supercharge React with HOC: How I Build Reusable Components the Smart Way

When you're building React apps, there’s one thing that sneaks up fast—repeating logic across components. Things like authentication, permission checks, or handling errors show up again and again.

Sure, React hooks solve a lot. But sometimes, hooks aren't enough—especially when you need to wrap entire components with shared logic. That’s where Higher-Order Components (HOCs) come in.

In this guide, I’ll show you how I use HOCs in React to write DRY, reusable code—taking an authentication guard as a real example.

Phase 1: What Problem Are We Solving?

First things first—do you really need an HOC?

I was working on an app dashboard where certain pages should only be visible if the user was logged in. Adding auth logic inside each page would be repetitive and error-prone.

The solution? A component wrapper that checks if the user is authenticated and handles redirection if not. Clean. Simple. Reusable.

Why HOC Instead of a Hook?

• ✅ Handles logic at the component level
• ✅ Works even with class components
• ✅ Great for patterns like auth, permissions, error boundaries
• ✅ Keeps UI components focused only on rendering

Phase 2: How the Architecture Looks

Here’s the plan:

• Create an HOC that wraps any component.
• If the user is authenticated, render the component.
• If not, redirect them to the login page.

When HOC Makes Sense vs Hooks

Phase 3: Building the HOC

🔧 The Auth Wrapper

Here’s how I built an HOC that checks authentication before rendering a component:

/hoc/withAuth.tsx:

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../hooks/useAuth";

export function withAuth<P>(WrappedComponent: React.ComponentType<P>) {
  return function AuthComponent(props: P) {
    const { isAuthenticated, isLoading } = useAuth();
    const navigate = useNavigate();

    useEffect(() => {
      if (!isLoading && !isAuthenticated) {
        navigate("/login");
      }
    }, [isAuthenticated, isLoading, navigate]);

    if (isLoading) {
      return <div>Loading...</div>;
    }

    if (!isAuthenticated) {
      return null;
    }

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