41. State management at scale (Zustand/Redux)

Beyond Context, dedicated state libraries like Zustand or Redux Toolkit offer better performance for frequently-updated global state (like live prices) via selective subscriptions instead of re-rendering the whole provider tree.

import { create } from "zustand";

interface WalletState {
  address: string | null;
  balance: number;
  setBalance: (b: number) => void;
}

const useWalletStore = create<WalletState>((set) => ({
  address: null,
  balance: 0,
  setBalance: (b) => set({ balance: b }),
}));

// component only re-renders when the balance field changes:
const balance = useWalletStore((s) => s.balance);

Choose based on team familiarity and needs: Zustand is minimal boilerplate for simpler apps; Redux Toolkit's middleware ecosystem (thunks, RTK Query) suits larger apps with complex async flows.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges