How Do You Manage State in Your React Application? A Practical Guide for 2024

How Do You Manage State in Your React Application? A Practical Guide for 2024

State management in React has evolved dramatically. What started as a simple “lift state up” pattern has exploded into a bewildering ecosystem of libraries, patterns, and strongly-held opinions. After building dozens of production React applications, I’ve learned one crucial lesson: most applications are over-engineered when it comes to state management.

Let’s cut through the noise and explore practical, battle-tested approaches to managing state in modern React applications.

Start Simple: Built-in React State

Before reaching for any library, exhaust React’s built-in capabilities. The 80/20 rule applies here—80% of your state management needs can be solved with useState, useReducer, and context.

Local Component State with useState

For UI state that only affects a single component, useState is perfect:

typescript
interface FormData {
email: string;
password: string;
}

function LoginForm() {
const [formData, setFormData] = useState({
email: ”,
password: ”
});
const [isSubmitting, setIsSubmitting] = useState(false);

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
try {
await login(formData);
} finally {
setIsSubmitting(false);
}
};

return (

{/* form fields */}

);
}

Lifting State Up (Still Valid!)

When multiple components need to share state, lift it to their nearest common ancestor. This pattern gets unfairly maligned, but it’s perfectly fine for small component trees:

typescript
function ParentComponent() {
const [selectedItem, setSelectedItem] = useState(null);

Don’t overthink this. If prop drilling bothers you after 2-3 levels, then consider alternatives.

Context API: The Underrated Middle Ground

React Context is excellent for cross-cutting concerns like themes, authentication, and feature flags. The key is to keep contexts focused and avoid putting everything in a global context.

typescript
interface AuthContextType {
user: User | null;
login: (credentials: Credentials) => Promise;
logout: () => void;
isAuthenticated: boolean;
}

const AuthContext = createContext(null);

export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState(null);

const login = async (credentials: Credentials) => {
const user = await authService.login(credentials);
setUser(user);
};

const logout = () => {
authService.logout();
setUser(null);
};

const value = {
user,
login,
logout,
isAuthenticated: !!user
};

return {children};
}

export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error(‘useAuth must be used within AuthProvider’);
}
return context;
}

Pro tip: Split contexts by domain. Don’t create a massive AppContext with everything. Create AuthContext, ThemeContext, FeatureFlagsContext, etc.

When to Reach for External Libraries

You need a dedicated state management library when:

1. State logic becomes complex with many interdependent updates
2. You need time-travel debugging or state persistence
3. Multiple components deep in the tree need frequent access to the same state
4. Performance becomes an issue with Context re-renders

Zustand: My Go-To for Client State

Zustand has become my preferred choice for global client state. It’s tiny (1KB), has minimal boilerplate, and just works:

typescript
import { create } from ‘zustand’;
import { persist } from ‘zustand/middleware’;

interface CartStore {
items: CartItem[];
addItem: (item: Product) => void;
removeItem: (id: string) => void;
clearCart: () => void;
total: number;
}

export const useCartStore = create()(persist(
(set, get) => ({
items: [],
addItem: (product) => set((state) => ({
items: […state.items, { …product, quantity: 1 }]
})),
removeItem: (id) => set((state) => ({
items: state.items.filter(item => item.id !== id)
})),
clearCart: () => set({ items: [] }),
get total() {
return get().items.reduce((sum, item) =>
sum + (item.price * item.quantity), 0
);
}
}),
{ name: ‘cart-storage’ }
));

// Usage is dead simple
function CartButton() {
const items = useCartStore(state => state.items);
return Cart ({items.length});
}

Zustand’s selector pattern prevents unnecessary re-renders, and the devtools integration is excellent.

Redux Toolkit: For Complex Enterprise Apps

Redux gets a bad rap, but Redux Toolkit has genuinely addressed most complaints. If you’re building a large application with complex state interactions, Redux Toolkit is still a solid choice:

typescript
import { createSlice, configureStore } from ‘@reduxjs/toolkit’;

const todosSlice = createSlice({
name: ‘todos’,
initialState: [],
reducers: {
addTodo: (state, action) => {
state.push({ id: Date.now(), text: action.payload, completed: false });
},
toggleTodo: (state, action) => {
const todo = state.find(t => t.id === action.payload);
if (todo) todo.completed = !todo.completed;
}
}
});

export const store = configureStore({
reducer: {
todos: todosSlice.reducer
}
});

The ecosystem, middleware support, and debugging tools are unmatched.

Server State Is Different: Use TanStack Query

Here’s a controversial opinion: most of your “state management” problems are actually server state problems. Server state (data fetched from APIs) has fundamentally different characteristics than client state:

• You don’t own it (the server does)
• It can become stale
• It needs caching, background updates, and error handling

Stop putting API data in Redux or Zustand. Use TanStack Query (formerly React Query):

typescript
import { useQuery, useMutation, useQueryClient } from ‘@tanstack/react-query’;

function UserProfile({ userId }: { userId: string }) {
const queryClient = useQueryClient();

const { data: user, isLoading } = useQuery({
queryKey: [‘user’, userId],
queryFn: () => fetchUser(userId),
staleTime: 5 * 60 * 1000 // 5 minutes
});

const updateMutation = useMutation({
mutationFn: updateUser,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [‘user’, userId] });
}
});

if (isLoading) return ;

return (

{user.name}

updateMutation.mutate(user)}>
Update

);
}

TanStack Query handles caching, deduplication, background refetching, and optimistic updates. It’s transformed how I build React applications.

My Recommended Stack

For most modern React applications in 2024, I recommend this combination:

1. Local UI state: useState and useReducer
2. Cross-cutting concerns: React Context API
3. Global client state: Zustand (or Jotai for atomic state)
4. Server state: TanStack Query
5. Form state: React Hook Form

This covers 95% of use cases without the complexity of Redux or MobX.

Conclusion

State management doesn’t have to be complicated. Start with React’s built-in tools, add Zustand when you need global client state, and use TanStack Query for server state. Only reach for Redux if you have specific requirements that justify its complexity.

The best state management solution is the simplest one that meets your needs. Resist the urge to over-engineer. Your future self (and your team) will thank you.

What’s your preferred approach to state management in React? The answer should depend on your specific application’s needs, not what’s trending on Twitter.

🛠 Recommended Tools

• Upstash — Serverless Redis and Kafka — pay per request
• Sentry — Error tracking and performance monitoring — free for small projects
• GitHub Copilot — AI pair programmer integrated into VS Code and JetBrains IDEs

Disclosure: some links above may earn a referral commission if you sign up.

📚 Recommended Reading

Want to go deeper on application?? These are worth it:

• Learning React: Modern Patterns for Developing React Apps by Alex Banks and Eve Porcello
• Redux in Action by Marc Garreau and Will Faurot

These are affiliate links — if you buy through them I earn a small commission at no extra cost to you.