Introduction
React continues to evolve, and with it, the best practices for building robust, maintainable applications. In this comprehensive guide, we'll explore the most important React best practices for 2024 that will help you write cleaner, more efficient code.
Whether you're a beginner looking to establish good habits or an experienced developer wanting to stay current with the latest patterns, this guide covers everything you need to know.
Component Design Principles
1. Keep Components Small and Focused
Each component should have a single responsibility. If a component is doing too many things, consider breaking it down into smaller, more focused components.
// ❌ Bad: Component doing too many things
function UserDashboard({ user }) {
const [posts, setPosts] = useState([]);
const [notifications, setNotifications] = useState([]);
const [settings, setSettings] = useState({});
// Lots of logic for different concerns...
return (
<div>
{/* Complex JSX mixing different concerns */}
</div>
);
}
// ✅ Good: Separate components for different concerns
function UserDashboard({ user }) {
return (
<div>
<UserProfile user={user} />
<UserPosts userId={user.id} />
<UserNotifications userId={user.id} />
<UserSettings userId={user.id} />
</div>
);
}
2. Use Composition Over Inheritance
React favors composition over inheritance. Use component composition to build complex UIs from simpler components.
// ✅ Good: Using composition
function Card({ children, className = "" }) {
return (
<div className={`card ${className}`}>
{children}
</div>
);
}
function UserCard({ user }) {
return (
<Card className="user-card">
<h2>{user.name}</h2>
<p>{user.email}</p>
</Card>
);
}
Modern Hook Patterns
1. Custom Hooks for Reusable Logic
Extract reusable stateful logic into custom hooks to promote code reuse and separation of concerns.
// Custom hook for API calls
function useApi(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
// Using the custom hook
function UserProfile({ userId }) {
const { data: user, loading, error } = useApi(`/api/users/${userId}`);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>{user.name}</div>;
}
2. Optimize with useMemo and useCallback
Use useMemo and useCallback to optimize expensive calculations and prevent unnecessary re-renders.
function ExpensiveComponent({ items, filter }) {
// Memoize expensive calculations
const filteredItems = useMemo(() => {
return items.filter(item => item.category === filter);
}, [items, filter]);
// Memoize callback functions
const handleItemClick = useCallback((itemId) => {
// Handle click logic
}, []);
return (
<div>
{filteredItems.map(item => (
<Item
key={item.id}
item={item}
onClick={handleItemClick}
/>
))}
</div>
);
}
State Management Best Practices
1. Use useReducer for Complex State Logic
When state logic becomes complex, useReducer can be more appropriate than useState.
const initialState = {
items: [],
loading: false,
error: null
};
function itemsReducer(state, action) {
switch (action.type) {
case 'FETCH_START':
return { ...state, loading: true, error: null };
case 'FETCH_SUCCESS':
return { ...state, loading: false, items: action.payload };
case 'FETCH_ERROR':
return { ...state, loading: false, error: action.payload };
case 'ADD_ITEM':
return { ...state, items: [...state.items, action.payload] };
case 'REMOVE_ITEM':
return {
...state,
items: state.items.filter(item => item.id !== action.payload)
};
default:
return state;
}
}
function ItemList() {
const [state, dispatch] = useReducer(itemsReducer, initialState);
const addItem = (item) => {
dispatch({ type: 'ADD_ITEM', payload: item });
};
return (
// Component JSX
);
}
2. Lift State Up Appropriately
Keep state as close to where it's needed as possible, but lift it up when multiple components need to share it.
// ✅ Good: State lifted to common parent
function ShoppingApp() {
const [cartItems, setCartItems] = useState([]);
return (
<div>
<ProductList onAddToCart={setCartItems} />
<ShoppingCart items={cartItems} />
</div>
);
}
Performance Optimization
1. Use React.memo for Component Memoization
Wrap components in React.memo to prevent unnecessary re-renders when props haven't changed.
const ExpensiveChild = React.memo(function ExpensiveChild({ data, onAction }) {
// Expensive rendering logic
return <div>{/* Complex JSX */}</div>;
});
// Custom comparison function for complex props
const MemoizedComponent = React.memo(function MyComponent({ user, settings }) {
return <div>{/* Component JSX */}</div>;
}, (prevProps, nextProps) => {
return prevProps.user.id === nextProps.user.id &&
prevProps.settings.theme === nextProps.settings.theme;
});
2. Lazy Loading with React.lazy
Use React.lazy and Suspense for code splitting and lazy loading components.
import { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
Error Handling
1. Error Boundaries
Implement error boundaries to catch and handle errors gracefully.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('Error caught by boundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Usage
function App() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
}
Testing Best Practices
1. Write Testable Components
Design components to be easily testable by keeping them pure and avoiding side effects in render methods.
// ✅ Good: Testable component
function UserGreeting({ user, onLogout }) {
return (
<div>
<h1>Welcome, {user.name}!</h1>
<button onClick={onLogout}>Logout</button>
</div>
);
}
// Test
import { render, fireEvent } from '@testing-library/react';
test('calls onLogout when logout button is clicked', () => {
const mockLogout = jest.fn();
const user = { name: 'John' };
const { getByText } = render(
<UserGreeting user={user} onLogout={mockLogout} />
);
fireEvent.click(getByText('Logout'));
expect(mockLogout).toHaveBeenCalled();
});
Code Organization
1. Consistent File Structure
Organize your files in a consistent, scalable way:
src/
components/
common/
Button/
Button.jsx
Button.test.js
Button.module.css
index.js
features/
UserProfile/
UserProfile.jsx
UserProfile.test.js
index.js
hooks/
useApi.js
useLocalStorage.js
utils/
helpers.js
constants.js
2. Consistent Naming Conventions
Use consistent naming conventions throughout your codebase:
- Components: PascalCase (
UserProfile) - Files: PascalCase for components, camelCase for utilities
- Props: camelCase (
userName,onButtonClick) - Constants: UPPER_SNAKE_CASE (
API_BASE_URL)
Conclusion
Following these React best practices will help you build more maintainable, performant, and scalable applications. Remember that best practices evolve with the ecosystem, so stay updated with the latest React developments and community recommendations.
The key is to start implementing these practices gradually in your projects and make them part of your development workflow. Focus on writing clean, readable code that your future self and your team members will thank you for.
Keep learning, keep practicing, and most importantly, keep building amazing React applications!
