react zustand state-management typescript

Zustand for lightweight state management

Maya Patel Jan 2026

2 tabs

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FilterState {
  search: string
  category: string | null
  sortBy: 'recent' | 'popular' | 'oldest'
  setSearch: (search: string) => void
  setCategory: (category: string | null) => void
  setSortBy: (sortBy: FilterState['sortBy']) => void
  resetFilters: () => void
}

const initialState = {
  search: '',
  category: null,
  sortBy: 'recent' as const,
}

export const useFilterStore = create<FilterState>()(
  persist(
    (set) => ({
      ...initialState,

      setSearch: (search) => set({ search }),
      setCategory: (category) => set({ category }),
      setSortBy: (sortBy) => set({ sortBy }),
      resetFilters: () => set(initialState),
    }),
    {
      name: 'filter-storage',
    }
  )
)

import { useFilterStore } from '@/stores/useFilterStore'

export function PostFilters() {
  const { search, category, sortBy, setSearch, setCategory, setSortBy, resetFilters } = useFilterStore()

  return (
    <div className="space-y-4 p-4 bg-white rounded-lg shadow">
      <input
        type="search"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search posts..."
        className="w-full px-3 py-2 border rounded"
      />

      <select
        value={category || ''}
        onChange={(e) => setCategory(e.target.value || null)}
        className="w-full px-3 py-2 border rounded"
      >
        <option value="">All Categories</option>
        <option value="tech">Tech</option>
        <option value="design">Design</option>
        <option value="business">Business</option>
      </select>

      <select
        value={sortBy}
        onChange={(e) => setSortBy(e.target.value as FilterState['sortBy'])}
        className="w-full px-3 py-2 border rounded"
      >
        <option value="recent">Most Recent</option>
        <option value="popular">Most Popular</option>
        <option value="oldest">Oldest First</option>
      </select>

      <button
        onClick={resetFilters}
        className="w-full px-3 py-2 bg-gray-200 rounded hover:bg-gray-300"
      >
        Reset Filters
      </button>
    </div>
  )
}

2 files · typescript Explain with highlit

Zustand provides a minimalist alternative to Redux with less boilerplate and better TypeScript support. I create stores with create that hold state and actions. Unlike Context, Zustand doesn't cause unnecessary re-renders—components only update when their selected state changes. Stores can be sliced into modules for better organization in large apps. Middleware like persist saves state to localStorage automatically. Zustand works great for client state that's too complex for useState but doesn't warrant Redux's ceremony. I use it for filters, UI preferences, or shopping carts. The devtools extension provides time-travel debugging similar to Redux. For most apps, Zustand hits the sweet spot between simplicity and power.