React State Management with Zustand

Manage global state in React using Zustand with TypeScript, including slice patterns, async actions, devtools middleware, and selector-based subscriptions.

Typescript React Data Fetching Updated: 2026-01-15

Code

snippet

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

interface BearState {
  bears: number;
  addBear: () => void;
  reset: () => void;
}

export const useBearStore = create<BearState>()(
  devtools((set) => ({
    bears: 0,
    addBear: () => set((s) => ({ bears: s.bears + 1 })),
    reset: () => set({ bears: 0 }),
  })),
);

// Usage: const bears = useBearStore((s) => s.bears);