Tag: hoc

Higher Order Components (HOC) in React: Complete Guide with Examples

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:

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