Mastering React Context API for State Management

Many developers jump to Redux or Zustand without exploring the built-in Context API. Used correctly, it can handle most small to medium app needs.

Creating a Context

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

Using the Context

function Profile() {
  const { user } = useAuth();
  return <h1>Hello, {user?.name}</h1>;
}

Avoiding Performance Issues

Split contexts by concern. Avoid putting everything in one context:

• AuthContext for user data
• ThemeContext for UI preferences
• CartContext for shopping cart

This ensures components only re-render when their specific context changes.

When to Use Context vs Zustand

Final Thoughts

Context API is great for auth, theme, and language. For complex state with frequent updates, consider Zustand or Jotai.

Happy Coding!