Recently, I was working on a large React project for a U.S.-based e-commerce platform. Over time, the codebase had grown messy, and repeated logic, deeply nested components, and inconsistent naming made it hard to maintain.
That’s when I decided to refactor the components. It wasn’t just about cleaning up code; it was about making the app easier to scale and debug. In this article, I’ll share the best practices I follow when refactoring React components, based on my experience building and maintaining production-grade React applications.
What Does Refactoring Mean in React?
In simple terms, refactoring means improving the internal structure of your React code without changing its behavior.
It’s like remodeling your house; you’re not moving to a new one, but you’re making the current one more efficient, cleaner, and easier to navigate.
Method 1 – Break Large Components into Smaller Ones
One of the most effective ways to refactor React code is by splitting large components into smaller, focused ones.
Let’s say we have a component that displays a list of U.S. cities with weather data, and it handles both fetching and rendering:
// Before Refactoring
import React, { useEffect, useState } from "react";
function WeatherDashboard() {
const [cities, setCities] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=USA")
.then((res) => res.json())
.then((data) => {
setCities(data.locations);
setLoading(false);
});
}, []);
if (loading) return <p>Loading weather data...</p>;
return (
<div>
<h2>Weather Dashboard (USA)</h2>
{cities.map((city) => (
<div key={city.id}>
<h3>{city.name}</h3>
<p>{city.temp}°F</p>
</div>
))}
</div>
);
}
export default WeatherDashboard;This component handles data fetching, loading state, and rendering, all in one place. Let’s refactor it.
After Refactoring
We’ll separate the logic into smaller, reusable components.
// WeatherDashboard.jsx
import React from "react";
import useWeatherData from "./useWeatherData";
import WeatherList from "./WeatherList";
function WeatherDashboard() {
const { cities, loading } = useWeatherData();
if (loading) return <p>Loading weather data...</p>;
return (
<div>
<h2>Weather Dashboard (USA)</h2>
<WeatherList cities={cities} />
</div>
);
}
export default WeatherDashboard;// useWeatherData.js
import { useEffect, useState } from "react";
export default function useWeatherData() {
const [cities, setCities] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("https://api.weatherapi.com/v1/search.json?key=YOUR_KEY&q=USA")
.then((res) => res.json())
.then((data) => {
setCities(data);
setLoading(false);
});
}, []);
return { cities, loading };
}// WeatherList.jsx
import React from "react";
function WeatherList({ cities }) {
return (
<div>
{cities.map((city) => (
<div key={city.id}>
<h3>{city.name}</h3>
<p>{city.region}</p>
</div>
))}
</div>
);
}
export default WeatherList;I executed the above example code and added the screenshot below.
Now, each file has a single responsibility: the dashboard displays, the hook fetches, and the list renders. This makes testing, debugging, and scaling much easier.
Method 2 – Use Custom Hooks for Reusable Logic
If you find yourself copying the same useEffect or state logic across multiple components, it’s time to extract that logic into a custom hook.
For example, let’s say multiple components need to track whether the user is online.
// useOnlineStatus.js
import { useState, useEffect } from "react";
export default function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);
return () => {
window.removeEventListener("online", handleOnline);
window.removeEventListener("offline", handleOffline);
};
}, []);
return isOnline;
}Now, you can use this hook anywhere:
import React from "react";
import useOnlineStatus from "./useOnlineStatus";
function StatusBanner() {
const isOnline = useOnlineStatus();
return (
<div
style={{
backgroundColor: isOnline ? "#4caf50" : "#f44336",
color: "white",
padding: "10px",
textAlign: "center",
}}
>
{isOnline ? "You are online" : "You are offline"}
</div>
);
}
export default StatusBanner;I executed the above example code and added the screenshot below.
This makes your code cleaner, reusable, and easier to test.
Method 3 – Simplify Props and Use Context
If you’re passing props down multiple layers (prop drilling), it’s a clear sign you should refactor using React Context.
Here’s a quick example:
// Before Refactoring
function App() {
const user = { name: "Alex", location: "California" };
return <Header user={user} />;
}
function Header({ user }) {
return <UserProfile user={user} />;
}
function UserProfile({ user }) {
return <p>Welcome, {user.name} from {user.location}</p>;
}Now let’s refactor it using Context:
// UserContext.js
import { createContext, useContext } from "react";
export const UserContext = createContext();
export const useUser = () => useContext(UserContext);// App.jsx
import React from "react";
import { UserContext } from "./UserContext";
import Header from "./Header";
function App() {
const user = { name: "Alex", location: "California" };
return (
<UserContext.Provider value={user}>
<Header />
</UserContext.Provider>
);
}
export default App;// UserProfile.jsx
import React from "react";
import { useUser } from "./UserContext";
function UserProfile() {
const user = useUser();
return <p>Welcome, {user.name} from {user.location}</p>;
}
export default UserProfile;This approach eliminates unnecessary prop passing and keeps your components clean.
Method 4 – Improve Performance with Memoization
When refactoring, also look for opportunities to improve performance. Use React.memo, useMemo, and useCallback to avoid unnecessary re-renders.
Example:
import React, { useState, useMemo } from "react";
function ExpensiveList({ items }) {
const sortedItems = useMemo(() => {
console.log("Sorting...");
return [...items].sort();
}, [items]);
return (
<ul>
{sortedItems.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}
function App() {
const [count, setCount] = useState(0);
const items = ["Banana", "Apple", "Cherry"];
return (
<div>
<button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
<ExpensiveList items={items} />
</div>
);
}
export default App;Here, the sorting logic runs only when items change, not every time the button is clicked.
Bonus Tips for Refactoring
- Use consistent naming conventions (camelCase for functions, PascalCase for components).
- Remove unused imports and dead code.
- Use TypeScript or PropTypes for type safety.
- Write unit tests before refactoring to ensure behavior doesn’t change.
- Keep your component tree shallow — avoid unnecessary nesting.
When I refactor React components, my goal is always the same: make the code simpler, faster, and easier to maintain.
Good refactoring is invisible to users but invaluable to developers. Once you start applying these practices, you’ll notice your React projects become more predictable, scalable, and enjoyable to work with.
You may also read:
- How to Build an Accordion Component in React
- Build a Simple React Tree View Component
- React Component Design Patterns
- Build a React Chat UI 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.
