State Management Patterns for Modern Applications

State management is one of the most debated topics in frontend development. With countless libraries and patterns available, choosing the right approach requires understanding your application's specific needs. AI can help you navigate these decisions.

Understanding State Categories#

Not all state is equal. Categorizing state helps choose the right management approach:

Local UI State#

Form input values
Modal open/closed
Dropdown selections
Animation states

Pattern: Component state (useState, useReducer)

Shared UI State#

Theme preferences
Sidebar collapsed
Active filters
Sort orders

Pattern: Context API or lightweight stores

Server Cache State#

API response data
User profiles
Product listings
Search results

Pattern: React Query, SWR, Apollo

Global Application State#

Authentication
User permissions
Shopping cart
Notification queue

Pattern: Redux, Zustand, Jotai

Pattern 1: Local State with Hooks#

For truly local state, hooks are sufficient:

function SearchForm() {
  const [query, setQuery] = useState('');
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <form onSubmit={() => onSearch(query)}>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onFocus={() => setIsExpanded(true)}
      />
      {isExpanded && <FilterOptions />}
    </form>
  );
}

When to use: State doesn't need to be shared, component lifecycle matches state lifecycle.

Pattern 2: Lifting State Up#

When siblings need to share state:

function ProductPage() {
  const [selectedVariant, setSelectedVariant] = useState(null);

  return (
    <div>
      <ProductImages variant={selectedVariant} />
      <ProductDetails
        selectedVariant={selectedVariant}
        onSelectVariant={setSelectedVariant}
      />
      <AddToCart variant={selectedVariant} />
    </div>
  );
}

When to use: Small component trees, clear data flow.

Pattern 3: Context for Dependency Injection#

Context works well for data that many components need:

const ThemeContext = createContext<Theme>('light');
const UserContext = createContext<User | null>(null);

function App() {
  const [theme, setTheme] = useState<Theme>('light');
  const [user, setUser] = useState<User | null>(null);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={user}>
        <MainContent />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

// Deeply nested component
function UserAvatar() {
  const user = useContext(UserContext);
  const { theme } = useContext(ThemeContext);

  return <Avatar user={user} theme={theme} />;
}

When to use: Data accessed by many components at different levels.

Warning: Context causes re-renders of all consumers. Split contexts by update frequency.

Pattern 4: Server State with React Query#

For data that comes from APIs:

function ProductList({ categoryId }) {
  const {
    data: products,
    isLoading,
    error,
    refetch
  } = useQuery({
    queryKey: ['products', categoryId],
    queryFn: () => fetchProducts(categoryId),
    staleTime: 5 * 60 * 1000, // 5 minutes
  });

  if (isLoading) return <Skeleton />;
  if (error) return <ErrorMessage error={error} onRetry={refetch} />;

  return <ProductGrid products={products} />;
}

Benefits:

Automatic caching
Background refetching
Optimistic updates
Request deduplication

When to use: Any data from external sources.

Pattern 5: Global Store with Zustand#

For application-wide state:

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

const useCartStore = create<CartStore>((set, get) => ({
  items: [],

  addItem: (item) => set((state) => ({
    items: [...state.items, item]
  })),

  removeItem: (itemId) => set((state) => ({
    items: state.items.filter((i) => i.id !== itemId)
  })),

  clear: () => set({ items: [] }),

  total: () => get().items.reduce((sum, item) => sum + item.price, 0),
}));

// Usage anywhere
function CartIcon() {
  const itemCount = useCartStore((state) => state.items.length);
  return <Badge count={itemCount}><ShoppingCartIcon /></Badge>;
}

function CartTotal() {
  const total = useCartStore((state) => state.total());
  return <span>${total.toFixed(2)}</span>;
}

When to use: State that needs to persist across navigation, accessible from anywhere.

Pattern 6: Atomic State with Jotai#

For fine-grained reactivity:

// Define atoms
const filterAtom = atom<Filter>({ category: 'all', priceRange: [0, 100] });
const sortAtom = atom<Sort>('newest');
const searchAtom = atom<string>('');

// Derived atom
const filteredProductsAtom = atom((get) => {
  const filter = get(filterAtom);
  const sort = get(sortAtom);
  const search = get(searchAtom);

  return products
    .filter(matchesFilter(filter))
    .filter(matchesSearch(search))
    .sort(sortBy(sort));
});

// Components only re-render when their atoms change
function FilterPanel() {
  const [filter, setFilter] = useAtom(filterAtom);
  // Only re-renders when filter changes
}

function SearchBar() {
  const [search, setSearch] = useAtom(searchAtom);
  // Only re-renders when search changes
}

When to use: Need fine-grained updates without complex selectors.

Pattern 7: URL State#

State that should be shareable:

function ProductSearch() {
  const [searchParams, setSearchParams] = useSearchParams();

  const category = searchParams.get('category') || 'all';
  const sort = searchParams.get('sort') || 'popular';
  const page = parseInt(searchParams.get('page') || '1');

  const updateFilters = (updates: Partial<Filters>) => {
    const newParams = new URLSearchParams(searchParams);
    Object.entries(updates).forEach(([key, value]) => {
      newParams.set(key, String(value));
    });
    setSearchParams(newParams);
  };

  return (
    <div>
      <FilterBar
        category={category}
        sort={sort}
        onFilterChange={updateFilters}
      />
      <ProductGrid category={category} sort={sort} page={page} />
    </div>
  );
}

When to use: Filters, pagination, view modes—anything users might want to bookmark or share.

Choosing the Right Pattern#

AI can help evaluate your specific situation:

Help me choose a state management approach:

Application: E-commerce site
State needs:
- Shopping cart (persist across pages)
- User authentication
- Product filters (shareable via URL)
- Product data (from API)
- UI preferences (theme, currency)
- Form state (checkout flow)

Team: 3 developers, familiar with React hooks
Existing stack: React 18, TypeScript

Recommend state management strategy.

Anti-Patterns to Avoid#

Global State for Local Concerns#

// ❌ Don't put form state in global store
const useFormStore = create((set) => ({
  email: '',
  password: '',
  setEmail: (email) => set({ email }),
  setPassword: (password) => set({ password }),
}));

// ✅ Keep form state local
function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  // ...
}

Duplicating Server State#

// ❌ Don't duplicate API data in store
const useProductStore = create((set) => ({
  products: [],
  fetchProducts: async () => {
    const products = await api.getProducts();
    set({ products });
  },
}));

// ✅ Use a server state library
const { data: products } = useQuery({
  queryKey: ['products'],
  queryFn: api.getProducts,
});

Over-Engineering Simple Apps#

// ❌ Don't add Redux for a simple app
// Store, slices, actions, selectors, middleware...

// ✅ Start simple, add complexity when needed
const [items, setItems] = useState([]);

Migration Strategies#

From Props Drilling to Context#

Convert this props-drilling pattern to Context:

Currently passing 'user' through 5 component levels.
Only leaf components actually use 'user'.

Provide refactored code with appropriate context structure.

From Context to External Store#

Migrate this Context-based state to Zustand:

Current issues:
- Too many re-renders
- Complex value object
- Need for selectors

Provide migration path that doesn't break existing consumers.

Conclusion#

State management isn't one-size-fits-all. The best approach depends on:

What kind of state you're managing
How widely it's used
How frequently it updates
Whether it needs to survive navigation
Your team's familiarity

Start with the simplest approach that works. Add complexity only when you hit real problems. Use AI to evaluate tradeoffs and identify the right pattern for your specific needs.

Share this article