Recently, I was working on a React project where I needed to reuse the same logic across multiple components.
The issue was… I didn’t want to repeat the same code again and again. That’s when I used Higher-Order Components (HOCs).
In this tutorial, I’ll show you how I use HOCs in React with simple examples. I’ll also share different methods so you can pick the one that works best for you.
What is a Higher Order Component in React?
A Higher-Order Component is a function that takes a component as input and returns a new enhanced component.
Think of it like a wrapper. Just like putting a protective case on your phone adds new features, a HOC adds extra functionality to your React components without changing them directly.
Method 1 – Create a Simple Higher Order Component
Let’s start with a very basic HOC that adds a timestamp to any component.
import React from "react";
// Higher Order Component
function withTimestamp(WrappedComponent) {
return function EnhancedComponent(props) {
const currentTime = new Date().toLocaleTimeString();
return <WrappedComponent {...props} time={currentTime} />;
};
}
// Regular Component
function Message({ text, time }) {
return (
<div>
<p>{text}</p>
<small>Time: {time}</small>
</div>
);
}
// Using the HOC
const MessageWithTime = withTimestamp(Message);
export default function App() {
return <MessageWithTime text="Hello from New York!" />;
}You can see the output in the screenshot below.
This HOC wraps the Message component and passes down the current time as a prop. Now every time the component renders, you’ll see the message along with the timestamp.
Method 2 – Use HOC for Authentication Check
In real-world projects, I often use HOCs for authentication. Here’s an example where I only allow authenticated users to view a component.
import React from "react";
// Higher Order Component
function withAuth(WrappedComponent) {
return function AuthComponent(props) {
const isAuthenticated = true; // Replace with real auth logic
if (!isAuthenticated) {
return <h2>Please log in to continue</h2>;
}
return <WrappedComponent {...props} />;
};
}
// Regular Component
function Dashboard() {
return <h1>Welcome to your Dashboard!</h1>;
}
// Using the HOC
const ProtectedDashboard = withAuth(Dashboard);
export default function App() {
return <ProtectedDashboard />;
}You can see the output in the screenshot below.
This HOC checks if the user is authenticated before rendering the Dashboard. If not, it shows a login message instead.
Method 3 – Reuse API Fetching Logic with HOC
Another common use case is fetching data from an API. Instead of writing the same useEffect and fetch logic in multiple components, I wrap it in a HOC.
import React, { useEffect, useState } from "react";
// Higher Order Component
function withDataFetching(WrappedComponent, url) {
return function DataFetchingComponent(props) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, [url]);
if (loading) return <p>Loading...</p>;
return <WrappedComponent data={data} {...props} />;
};
}
// Regular Component
function UserList({ data }) {
return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
// Using the HOC
const UserListWithData = withDataFetching(
UserList,
"https://jsonplaceholder.typicode.com/users"
);
export default function App() {
return (
<div>
<h2>Users in the USA</h2>
<UserListWithData />
</div>
);
}You can see the output in the screenshot below.
This HOC fetches user data from an API and passes it to the UserList component. Now, I can reuse this HOC for any API endpoint by just changing the URL.
Method 4 – Add Styling with HOC
Sometimes I use HOCs to add styling or themes to components.
Here’s a quick example:
import React from "react";
// Higher Order Component
function withBorder(WrappedComponent) {
return function StyledComponent(props) {
return (
<div style={{ border: "2px solid blue", padding: "10px" }}>
<WrappedComponent {...props} />
</div>
);
};
}
// Regular Component
function Note({ text }) {
return <p>{text}</p>;
}
// Using the HOC
const NoteWithBorder = withBorder(Note);
export default function App() {
return <NoteWithBorder text="This note is styled with a border." />;
}This HOC adds a blue border around the component. It’s a neat way to apply consistent styles without repeating CSS everywhere.
When Should You Use HOCs?
From my experience, HOCs are best when:
- You need to reuse logic across multiple components.
- You want to separate concerns (like authentication, fetching, and styling).
- You’re working on large projects where repeating code becomes messy.
But remember: with React Hooks, many developers now prefer custom hooks instead of HOCs. Still, HOCs are powerful and widely used in existing projects.
Both beginners and experienced developers can benefit from understanding Higher-Order Components.
While I now use hooks more often, I still rely on HOCs when I need to wrap multiple components with shared logic. They’re simple, reusable, and effective.
You may also read:
- React Component Naming Conventions
- Top React UI Component Libraries to Build Modern Web Apps
- Build a React Modal Component Example
- React Class Component vs Functional Component
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
