Lesson 22 — Higher-Order Components (HOC Pattern)

🧭 Introduction

As React applications grow, you’ll often notice repeated logic across multiple components:

• Authentication checks
• Logging
• Permission validation
• Data loading states
• Feature toggles

Copy-pasting this logic leads to:
❌ Duplication
❌ Bugs
❌ Hard maintenance

To solve this, React introduced a powerful composition pattern called:

Higher-Order Components (HOC)

This lesson explains what HOCs are, how they work, and when they should (and should not) be used — exactly the level expected from senior React developers.

🎯 What You’ll Learn in This Lesson

By the end of this lesson, you will understand:

• What a Higher-Order Component is
• The mental model behind HOCs
• How to create and use HOCs
• Real-world use cases
• Common mistakes
• HOCs vs Hooks (modern perspective)

🧠 What Is a Higher-Order Component?

A Higher-Order Component is:

A function that takes a component and returns a new component.

In simple terms:

const EnhancedComponent = withSomething(OriginalComponent);

• Input → Component
• Output → Enhanced Component

👉 HOCs add extra behavior without modifying the original component.

🧩 Basic HOC Structure

function withExample(WrappedComponent) {
  return function EnhancedComponent(props) {
    return <WrappedComponent {...props} />;
  };
}

Key points:

• HOCs are functions
• They do not change the original component
• They wrap and enhance it

🔍 Simple Example — Logging HOC

HOC Definition

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

Using the HOC

function Profile({ name }) {
  return <h2>{name}</h2>;
}

export default withLogger(Profile);

Now:
✔ Every render logs props
✔ Profile component remains clean

🧠 Why HOCs Are Powerful

HOCs allow you to:

• Reuse logic across components
• Keep components focused
• Apply cross-cutting concerns

This is similar to:

• Middleware
• Decorators
• Aspect-oriented programming

🏗️ Real-World Use Case — Authentication HOC

HOC

function withAuth(WrappedComponent) {
  return function(props) {
    const isLoggedIn = true; // example

    if (!isLoggedIn) {
      return <p>Please login</p>;
    }

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

Usage

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

export default withAuth(Dashboard);

✔ Auth logic reused
✔ UI component untouched

🧠 Data Injection via HOC

function withUser(WrappedComponent) {
  return function(props) {
    const user = { name: "Avni", role: "Admin" };
    return <WrappedComponent {...props} user={user} />;
  };
}

🧠 Naming Convention (Important)

Always name HOCs with with prefix:

✅ withAuth
✅ withLogger
✅ withTheme

This improves readability and debugging.

🧠 Preserving Display Name (Best Practice)

For better debugging:

function withLogger(WrappedComponent) {
  function EnhancedComponent(props) {
    return <WrappedComponent {...props} />;
  }

  EnhancedComponent.displayName =
    `withLogger(${WrappedComponent.displayName || WrappedComponent.name})`;

  return EnhancedComponent;
}

This helps in React DevTools.

❌ Common HOC Mistakes

❌ Modifying Wrapped Component

Never change original component logic.

❌ Forgetting to Pass Props

Always forward props:

<WrappedComponent {...props} />

❌ Overusing HOCs

Too many HOCs lead to:

• Wrapper hell
• Hard debugging

🆚 HOCs vs Hooks (Modern Comparison)

👉 Hooks are the modern replacement for most HOC use cases.

🧠 When Should You Still Use HOCs?

HOCs are still useful when:

• Working with class components
• Enhancing third-party components
• Cross-cutting concerns at export level
• Legacy codebases

🧠 HOCs + Hooks Together

Modern HOCs often use hooks internally:

function withAuth(WrappedComponent) {
  return function(props) {
    const isLoggedIn = useAuth(); // custom hook
    return isLoggedIn ? <WrappedComponent {...props} /> : null;
  };
}

✔ Best of both worlds.

🎯 Best Practices (Senior-Level)

✅ Use HOCs sparingly
✅ Prefer hooks for new code
✅ Keep HOCs small and focused
✅ Preserve display names
✅ Avoid deep nesting

❓ FAQs — Higher-Order Components

🔹 Are HOCs deprecated?

No — but hooks are preferred for new logic.

🔹 Can I use multiple HOCs?

Yes, but avoid deep nesting.

🔹 Are HOCs asked in interviews?

Yes — especially conceptually.

🔹 Can HOCs manage state?

Yes — but hooks usually do it better.

🧠 Quick Recap

✔ HOC = function that returns a component
✔ Used for cross-cutting concerns
✔ Promotes reuse without duplication
✔ Hooks replace most HOC use cases
✔ Still important to understand

🎉 Conclusion

Higher-Order Components teach an important lesson:

React is about composition, not inheritance.

Even though hooks are dominant today, understanding HOCs:

• Improves architectural thinking
• Helps with legacy code
• Strengthens interview confidence

This lesson completes another core design pattern every advanced React developer should know ⚛️🏗️

👉 Next Lesson

Lesson 23 — Render Props Pattern