Stop 08 · ReactTopics · 19/20

HOC

In short

A higher-order component (HOC) is a function that takes a component and returns a new one with extra powers, like 'show only if logged in'. Older codebases are full of them.

Higher-Order Component — a function that takes a component and returns a new, enhanced component — an older pattern for cross-cutting logic like auth checks, now mostly replaced by hooks.

The jaadu mascot ties a ribbon on a wrapped gift box next to a plain brown box.

Think of it like this

The gift-wrapping counter

You hand a plain box to the mall's gift counter. It comes back with paper, a ribbon and a card. Same gift inside, extra stuff outside. An HOC takes your component and hands it back wrapped with extra behaviour.

Watch it happen

Inside a wrapped component

Parent

Protected

useAuth

Dashboard

props: {month}

1/5The parent renders ProtectedDashboard, which is really the Protected component.

The big ideas

What you need to know

A function, not a component

withAuth(Profile) returns a new component. HOC names usually start with 'with'.

Adds behaviour or props

Common uses are checking login, showing a loading spinner, logging, or injecting data.

Pass the rest through

Always spread {...props} onto the wrapped component, or the original props get lost.

Hooks often replace them

Most HOCs today could be a custom hook, like useAuth(), with less wrapping.

See it in code

Walk through the code

tsx

1import type { ComponentType } from "react";2import { useAuth } from "./auth"; // your own hook3import { Dashboard } from "./Dashboard";4 5export function withAuth<P extends object>(Wrapped: ComponentType<P>) {6  return function Protected(props: P) {7    const { user } = useAuth();8    if (!user) return <p>Please log in to continue.</p>;9    return <Wrapped {...props} />;10  };11}12 13// Create it once, outside any component14export const ProtectedDashboard = withAuth(Dashboard);

1/5withAuth takes any component and returns a new one.

withAuth adds a login check to any component. Dashboard itself stays simple and never knows the check exists.

Save yourself the pain

Common mistakes

Oops

Calling withAuth(Dashboard) inside another component's render.

Do this instead

Create the wrapped component once at the top level. Inside render it's a brand-new component every time, so its state resets.

Oops

Forgetting to pass props through to the wrapped component.

Do this instead

Spread {...props}, or the wrapped component silently loses everything the parent passed.

Your mission

Wrap it up

~20 min

Quick check

What does withAuth(Dashboard) return?

Go deeper

1Read a classic HOC example, like `withAuth(Component)`.
2Rewrite a simple HOC's logic as a custom hook instead.
3Recognize HOCs when you see them in older codebases or libraries.