typescript 79 lines · 2 tabs

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.

Related snips

typescript

export interface RetryOptions {
  retries: number;
  baseMs: number;
  maxMs: number;
  signal?: AbortSignal;
  onRetry?: (attempt: number, delay: number, err: unknown) => void;

Exponential backoff with jitter for retries

typescript reliability retry

by codesnips 2 tabs

typescript

import axios, { AxiosError } from 'axios'
import { v4 as uuidv4 } from 'uuid'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api/v1',
  timeout: 15000,

Axios API client with interceptors

react axios api

by Maya Patel 1 tab

swift

import SwiftUI

struct ContentView: View {
    @State private var username = ""
    @State private var isLoggedIn = false
    @StateObject private var viewModel = LoginViewModel()

SwiftUI declarative UI with state management

swift swiftui ios

by Sofia Martinez 2 tabs

typescript

import React from "react";

type FallbackProps = {
  error: Error;
  reset: () => void;
};

React Error Boundary + error reporting hook

react frontend error-boundary

by codesnips 3 tabs

javascript

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
});

/** @type {import('next').NextConfig} */

Next.js bundle analyzer for targeted performance work

nextjs performance tooling

by codesnips 4 tabs

typescript

import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/contexts/AuthContext'

interface ProtectedRouteProps {
  children: React.ReactNode
}

React Router with protected routes

react react-router routing

by Maya Patel 2 tabs

Share this code

Here's the card — post it anywhere.

Zustand for lightweight state management — share card

Link copied