In this guide, you'll learn the top React best practices that can help you
create clean, scalable, and high-performing apps. Whether you're just getting
started or looking to improve your skills, this comprehensive guide covers
everything from component structure and state management to performance
optimization and code organization.
Component Design and Architecture:
Keep Components Small and Focused
The Single Responsibility Principle applies strongly to React components. Each
component should have one clear purpose and do it well. Large components
become difficult to test, debug, and maintain.
// ❌ Bad: Large component doing too much
function UserDashboard({ userId }) {
// 200+ lines of code handling user data, notifications, settings...
}
// ✅ Good: Focused components
function UserDashboard({ userId }) {
return (
<div>
<UserProfile userId={userId} />
<NotificationPanel userId={userId} />
<UserSettings userId={userId} />
</div>
);
}
Use Composition Over Inheritance
React favors composition patterns. Instead of complex inheritance hierarchies,
compose components together to build complex UIs.
// ✅ Good: Composition pattern
function Card({ children, title }) {
return (
<div className="card">
<h2>{title}</h2>
{children}
</div>
);
}
function UserCard({ user }) {
return (
<Card title="User Profile">
<img src={user.avatar} alt={user.name} />
<p>{user.bio}</p>
</Card>
);
}
State Management:
Use the Right Tool for State
Not all state needs to be in a global store. Choose the appropriate state
management solution based on your needs:
-
Local state (useState): Component-specific data that doesn't need
sharing
-
Lifted state: Shared between a few related components
-
Context:
App-wide state like themes or user authentication
-
External libraries: Complex state logic (Redux, Zustand, MobX)
// ✅ Good: Local state for component-specific data
function SearchInput({ onSearch }) {
const [query, setQuery] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onSearch(query);
};
return (
<form onSubmit={handleSubmit}>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
</form>
);
}
Minimize State Dependencies
Keep your state flat and avoid deeply nested objects. This makes updates
easier and prevents unnecessary re-renders.
// ❌ Bad: Nested state
const [user, setUser] = useState({
profile: {
personal: {
name: '',
email: ''
}
}
});
// ✅ Good: Flat state
const [userName, setUserName] = useState('');
const [userEmail, setUserEmail] = useState('');
Performance Optimization:
Memoization Strategies
Use React's built-in memoization tools wisely, but don't overuse them.
Premature optimization can make code harder to read without significant
benefits.
// ✅ Good: Memoize expensive calculations
const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
const processedData = useMemo(() => {
return data.map(item => complexCalculation(item));
}, [data]);
return <div>{processedData.map(renderItem)}</div>;
});
// ✅ Good: Memoize callback functions passed to children
function ParentComponent({ items }) {
const handleItemClick = useCallback((id) => {
// Handle click logic
}, []);
return (
<div>
{items.map(item =>
<ChildComponent
key={item.id}
item={item}
onClick={handleItemClick}
/>
)}
</div>
);
}
Avoid Inline Objects and Functions
Creating objects or functions inline in render methods causes unnecessary
re-renders of child components.
// ❌ Bad: Inline objects cause re-renders
function MyComponent() {
return <ChildComponent style={{ margin: 10 }} />;
}
// ✅ Good: Define objects outside render or use useMemo
const styles = { margin: 10 };
function MyComponent() {
return <ChildComponent style={styles} />;
}
Custom Hooks:
Extract Reusable Logic
Custom hooks are perfect for sharing stateful logic between components. They
keep your components clean and promote code reuse.
// ✅ Good: 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 };
}
// Usage in component
function UserProfile({ userId }) {
const { data: user, loading, error } = useApi(`/api/users/${userId}`);
if (loading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
return <div>{user.name}</div>;
}
Follow Hook Rules
Always follow the Rules of Hooks: only call hooks at the top level of
functions and only from React functions or custom hooks.
// ❌ Bad: Conditional hook usage
function MyComponent({ shouldFetch }) {
if (shouldFetch) {
const data = useFetch('/api/data'); // Violates rules of hooks
}
}
// ✅ Good: Hooks at top level
function MyComponent({ shouldFetch }) {
const data = useFetch(shouldFetch ? '/api/data' : null);
}
Error Handling:
Implement Error Boundaries
Error boundaries catch JavaScript errors in component trees and display
fallback UIs instead of crashing the entire application.
class ErrorBoundary extends 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>
<UserDashboard />
</ErrorBoundary>
);
}
Handle Async Errors Gracefully
Always handle potential errors in async operations and provide meaningful
feedback to users.
function DataComponent() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetchData()
.then(setData)
.catch(err => {
setError('Failed to load data. Please try again.');
console.error(err);
});
}, []);
if (error) {
return <div className="error">{error}</div>;
}
return data ? <DataDisplay data={data} /> : <Loading />;
}
Code Organization and Structure:
Use Consistent File Structure
Organize your files in a logical, consistent manner. Group related files
together and use clear naming conventions.
Use TypeScript for Better Development Experience
TypeScript provides excellent developer experience with better autocomplete,
refactoring support, and catch errors at compile time.
interface User {
id: string;
name: string;
email: string;
}
interface UserProfileProps {
user: User;
onEdit: (user: User) => void;
}
function UserProfile({ user, onEdit }: UserProfileProps) {
return (
<div>
<h2>{user.name}</h2>
<button onClick={() => onEdit(user)}>
Edit Profile
</button>
</div>
);
}
Accessibility:
Make Your Apps Inclusive
Always consider accessibility when building React components. Use semantic
HTML, proper ARIA attributes, and ensure keyboard navigation works.
function Modal({ isOpen, onClose, title, children }) {
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
}
return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen]);
if (!isOpen) return null;
return (
<div
className="modal-overlay"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<div className="modal-content" onClick={e => e.stopPropagation()}>
<h2 id="modal-title">{title}</h2>
<button
onClick={onClose}
aria-label="Close modal"
className="close-button"
>
×
</button>
{children}
</div>
</div>
);
}
Key Takeaways:
Following these React best practices will help you build applications that
are:
-
Maintainable: Clean, organized code that's easy to update and
extend
- Performant: Optimized components that render efficiently
- Accessible: Inclusive applications that work for all users
-
Scalable: Architecture that grows well with your application's
needs
Remember, best practices evolve with the React ecosystem. Stay updated with
the latest React documentation, follow the community discussions, and always
consider the specific needs of your project when applying these guidelines.
The goal is to write code that not only works today but remains maintainable
and performant as your application grows.
