✅ What is a Higher-Order Component (HOC) in React?

A Higher-Order Component (HOC) in React is a design pattern where a function takes a component as input and returns a new enhanced component. The goal is to add extra behavior or logic without modifying the original component itself. You can think of an HOC as a wrapper that extends a component’s capabilities while keeping its core implementation clean and reusable. HOCs are commonly used for sharing logic such as authentication, logging, theming, analytics, or data fetching across multiple components.

🔹 Why Use Higher-Order Components?

Higher-Order Components help improve code quality and structure. They promote code reusability by allowing the same logic to be reused across different components. They keep components clean and focused on UI, while the HOC handles additional responsibilities. They are ideal for cross-cutting concerns like authentication or logging, and they improve maintainability by avoiding duplicated logic scattered across the codebase.

🚀 HOC Syntax

const EnhancedComponent = HOC(WrappedComponent);

Here, WrappedComponent is the original component, HOC is the function that adds extra logic, and EnhancedComponent is the new component you actually render.

🔧 Example 1: Logging Props with an HOC

import React from "react";

// HOC function
function withLogger(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log("Current Props:", props);
    return <WrappedComponent {...props} />;
  };
}

// Normal component
function User(props) {
  return <h2>Hello, {props.name} 👋</h2>;
}

// Using HOC
const UserWithLogger = withLogger(User);

export default function App() {
  return (
    <div>
      <UserWithLogger name="Balaji" />
      <UserWithLogger name="React Developer" />
    </div>
  );
}

In this example, the User component is only responsible for rendering UI. The withLogger HOC adds logging behavior without touching the User component’s logic. Every time the enhanced component renders, props are logged automatically.

🔐 Example 2: Authentication with an HOC

function withAuth(WrappedComponent) {
  return function ProtectedComponent(props) {
    const isLoggedIn = props.isLoggedIn;

    if (!isLoggedIn) {
      return <h3>⚠ Please log in to continue.</h3>;
    }

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

function Dashboard() {
  return <h2>Welcome to your Dashboard 🎉</h2>;
}

const ProtectedDashboard = withAuth(Dashboard);

export default function App() {
  return (
    <div>
      <ProtectedDashboard isLoggedIn={false} />
      <ProtectedDashboard isLoggedIn={true} />
    </div>
  );
}

Here, the HOC controls access to the Dashboard. If the user is not logged in, a warning is shown. If authentication succeeds, the wrapped component renders normally.

🧠 Key Concepts of Higher-Order Components

An HOC is essentially a wrapper function that returns a new component. Props must always be forwarded using {...props} to ensure the wrapped component continues to behave correctly. HOCs should remain pure, meaning they should not mutate props or cause unexpected side effects.

✅ Best Practices for Using HOCs

Always forward props to the wrapped component to avoid breaking functionality. Use HOCs mainly for logic reuse, not for rendering UI. Avoid deeply nesting multiple HOCs, as it can make debugging harder. Give enhanced components clear names, such as UserWithLogger, to improve readability and debugging.

📌 Common Use Cases of HOCs

HOCs are widely used for authentication and authorization, logging and analytics, theming and styling, performance optimizations like memoization, and reusable data-fetching logic.

🧾 Conclusion

A Higher-Order Component (HOC) is a powerful and proven React pattern for reusing logic and keeping components clean. While modern React often favors hooks for logic reuse, HOCs are still heavily used in existing codebases and popular libraries like react-redux. Understanding and mastering HOCs will help you build scalable, reusable, and maintainable React applications, especially when working with large or legacy projects.

Higher-Order Components (HOC) in React