When working with React, you’ll often need to reuse logic across multiple components.

That’s where Higher Order Components (HOC) come into the picture.

In this guide, you’ll learn:

• What a Higher Order Component is
• Why we need it
• How it works
• Multiple real-world examples
• When to use and when to avoid

What is a Higher Order Component (HOC)?

Simple Definition

A Higher Order Component (HOC) is a function that takes a component and returns a new enhanced component.

Syntax

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Simple Example

function withLogger(Component) {
  return function EnhancedComponent(props) {
    console.log("Component rendered");
    return <Component {...props} />;
  };
}

👉 Usage:

function Button() {
  return <button>Click</button>;
}

const EnhancedButton = withLogger(Button);

Why Do We Need HOC?

Without HOC:

❌ Duplicate logic in multiple components

With HOC:

✅ Reuse logic
✅ Cleaner code
✅ Better maintainability

How HOC Works (Step-by-Step)

1. Take a component as input
2. Add extra logic
3. Return a new component
4. Render original component with props

Scenario 1: Logging (Basic Example)

function withLogger(Component) {
  return function (props) {
    console.log("Props:", props);
    return <Component {...props} />;
  };
}

Scenario 2: Authentication (Very Common)

HOC

function withAuth(Component) {
  return function (props) {
  
     const { isLoggedIn } = useContext(AuthContext); 

     if (!isLoggedIn) {
      return <h2>Please Login</h2>;
    }    

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

Usage

function Dashboard() {
  return <h1>Welcome to Dashboard</h1>;
}

export default withAuth(Dashboard);

Scenario 3: API Data Fetching

HOC

import { useEffect, useState } from "react";

function withData(Component, url) {
  return function (props) {
    const [data, setData] = useState([]);

    useEffect(() => {
      fetch(url)
        .then(res => res.json())
        .then(setData);
    }, []);    

   return <Component data={data} {...props} />;

  };
}

Usage

function Users({ data }) {
  return <div>{data.length} Users</div>;
}

export default withData(Users, "/api/users");

Scenario 4: Loading State

function withLoading(Component) {
  return function ({ isLoading, ...props }) {
    if (isLoading) return <p>Loading...</p>;
    return <Component {...props} />;
  };
}

Scenario 5: Reusing Styles

function withStyle(Component) {
  return function (props) {
    return (
      <div style={{ border: "1px solid black", padding: "10px" }}>
        <Component {...props} />
      </div>
    );
  };
}

Common Mistakes

❌ Forgetting to pass props

return <Component />; // ❌

👉 Fix:

return <Component {...props} />; // ✅

❌ Mutating original component

👉 Always return a new component

HOC vs Hooks

HOC

• Works with class components
• Reusable logic

Hooks

• Simpler
• Preferred in modern React

When to Use HOC

Use HOC when:

• You need reusable logic
• Working with legacy/class components
• Cross-cutting concerns (auth, logging)

When to Avoid HOC

Avoid when:

• Hooks can solve it easily
• Too many nested HOCs (complexity increases)

🧠 Interview Tip

If asked:

“What is HOC?”

👉 Answer:

“A Higher Order Component is a function that takes a component and returns a new component with added functionality.”

🏁 Final Summary

• HOC = function that enhances components
• Helps reuse logic
• Used for auth, logging, data fetching
• Hooks are modern alternative

🔗 Related Articles

👉 Add these:

• What is DOM, Virtual DOM, and Real DOM in React? (Simple Explanation for Beginners)
• What is React JS? Why is it Efficient? (Beginner-Friendly Guide)
• Controlled vs Uncontrolled Components in React (Beginner Friendly)

💡 Found this helpful? Subscribe for simple React guides, real-world examples, and interview preparation tips. Happy Coding!