After years of Redux boilerplate and Context re-render nightmares, we found a better way. You know what's funny? The React team keeps saying "just use Context!" but then you use it and your entire app re-renders when someone types in a search box. Let me show you how we manage state in our 300+ component dashboard without Redux, and why we avoid Context like the plague. ## The State Management Journey Our evolution looked like this: 1. **2019**: Redux everywhere (even for local UI state) 2. **2020**: "Let's use Context, it's built-in!" 3. **2021**: Performance issues, back to Redux 4. **2022**: Discovered Zustand and nuqs 5. **2023**: Found the perfect combination ## Why Context Is Not The Answer Here's what they don't tell you about Context: ```javascript // Looks innocent enough const AppContext = createContext(); function AppProvider({ children }) { const [user, setUser] = useState(null); const [theme, setTheme] = useState("light"); const [sidebarOpen, setSidebarOpen] = useState(true); return ( {children} ); } ``` The problem? Change any value, and every component using the context re-renders. We had 50+ components reading from our AppContext. Opening the sidebar caused the entire app to re-render. ## The Three-Layer State Strategy After much pain, we settled on this approach: ### Layer 1: Local State (70% of cases) Most state doesn't need to be global: ```javascript function VideoUploader() { // UI state stays local const [uploading, setUploading] = useState(false); const [progress, setProgress] = useState(0); const [dragActive, setDragActive] = useState(false); // Only lift what needs sharing const uploadVideo = async (file) => { setUploading(true); try { await api.upload(file, (p) => setProgress(p)); // Only now update global state videoStore.addVideo(file); } finally { setUploading(false); } }; } ``` Rule: Start with local state. Only lift when you actually need to share. ### Layer 2: Zustand for Client State (25% of cases) When you need to share state across components, Zustand is magic: ```javascript // stores/videoStore.js import { create } from "zustand"; import { subscribeWithSelector } from "zustand/middleware"; const useVideoStore = create( subscribeWithSelector((set, get) => ({ videos: [], filter: "all", searchQuery: "", // Actions setVideos: (videos) => set({ videos }), addVideo: (video) => set((state) => ({ videos: [...state.videos, video], })), setFilter: (filter) => set({ filter }), setSearchQuery: (query) => set({ searchQuery }), // Computed values get filteredVideos() { const { videos, filter, searchQuery } = get(); return videos.filter((v) => { if (filter !== "all" && v.status !== filter) return false; if ( searchQuery && !v.title.toLowerCase().includes(searchQuery.toLowerCase()) ) { return false; } return true; }); }, })) ); // Usage function VideoList() { // Only re-renders when filteredVideos changes const videos = useVideoStore((state) => state.filteredVideos); return (

{videos.map((video) => ( ))}

); } function VideoFilters() { // Only subscribes to what it needs const filter = useVideoStore((state) => state.filter); const setFilter = useVideoStore((state) => state.setFilter); return ( ); } ``` Why Zustand wins: - No providers - Granular subscriptions (components only re-render for their data) - DevTools support - TypeScript just works - 8KB bundle size ### Layer 3: nuqs for URL State (5% of cases) The secret weapon - URL as state storage: ```javascript // useFilters.js import { useQueryState } from "nuqs"; function useFilters() { // URL state with type safety const [search, setSearch] = useQueryState("search", { defaultValue: "", parse: (value) => value || "", }); const [status, setStatus] = useQueryState("status", { defaultValue: "all", parse: (value) => value || "all", }); const [page, setPage] = useQueryState("page", { defaultValue: 1, parse: (value) => parseInt(value) || 1, }); return { search, setSearch, status, setStatus, page, setPage, }; } // Usage function VideosDashboard() { const { search, setSearch, status, setStatus } = useFilters(); // URL automatically updates: /videos?search=demo&status=processing // Shareable links just work! return ( <> setSearch(e.target.value)} placeholder="Search videos..." /> ); } ``` Benefits of URL state: - Shareable links - Browser back/forward works - Survives refresh - SEO friendly - Free persistence ## Real-World Patterns ### Pattern 1: Async State Management ```javascript // stores/useAsyncStore.js const useAsyncStore = create((set) => ({ data: null, loading: false, error: null, fetchData: async (id) => { set({ loading: true, error: null }); try { const data = await api.fetch(id); set({ data, loading: false }); } catch (error) { set({ error: error.message, loading: false }); } }, reset: () => set({ data: null, loading: false, error: null }), })); ``` ### Pattern 2: Persisted State ```javascript // stores/useSettingsStore.js import { persist } from "zustand/middleware"; const useSettingsStore = create( persist( (set) => ({ theme: "light", sidebarCollapsed: false, videoQuality: "auto", setTheme: (theme) => set({ theme }), toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed, })), setVideoQuality: (quality) => set({ videoQuality: quality }), }), { name: "user-settings", // localStorage key partialize: (state) => ({ // Only persist specific fields theme: state.theme, sidebarCollapsed: state.sidebarCollapsed, videoQuality: state.videoQuality, }), } ) ); ``` ### Pattern 3: Computed Values Without Re-renders ```javascript // Instead of computing in components const useAnalyticsStore = create((set, get) => ({ videos: [], // ❌ Don't do this - creates new object every time // getStats: () => ({ // total: get().videos.length, // processed: get().videos.filter(v => v.processed).length // }) // ✅ Do this - memoized selector stats: { get total() { return get().videos.length; }, get processed() { return get().videos.filter((v) => v.processed).length; }, get pending() { return get().videos.filter((v) => !v.processed).length; }, }, })); // Usage with shallow comparison function StatsBar() { const { total, processed, pending } = useAnalyticsStore( (state) => state.stats, shallow // Important! Prevents unnecessary re-renders ); } ``` ### Pattern 4: Cross-Store Communication ```javascript // stores/useAuthStore.js const useAuthStore = create((set) => ({ user: null, logout: () => { set({ user: null }); // Clear other stores useVideoStore.getState().reset(); useSettingsStore.persist.clearStorage(); }, })); // stores/useVideoStore.js const useVideoStore = create((set) => ({ videos: [], reset: () => set({ videos: [] }), // React to auth changes initializeStore: () => { useAuthStore.subscribe( (state) => state.user, (user) => { if (!user) { set({ videos: [] }); } } ); }, })); ``` ## Migration Strategy Here's how we migrated from Redux: ### Step 1: Identify State Categories ```javascript // Categorize your Redux state { // UI State → Local React state modals: { videoUploadOpen: false }, forms: { uploadProgress: 0 }, // Client State → Zustand videos: [], user: { id: 1, name: 'John' }, // URL State → nuqs filters: { search: '', page: 1 }, // Server State → React Query (separate topic) api: { videos: { data: [], loading: false } } } ``` ### Step 2: Gradual Migration ```javascript // Start with one feature // Before: Redux const VideoList = () => { const videos = useSelector((state) => state.videos); const dispatch = useDispatch(); return (

dispatch(selectVideo(id))}> {videos.map((v) => (

); }; // After: Zustand const VideoList = () => { const videos = useVideoStore((state) => state.videos); const selectVideo = useVideoStore((state) => state.selectVideo); return (

selectVideo(id)}> {videos.map((v) => (

); }; ``` ## Performance Comparison We measured re-renders on our dashboard: | Action | Redux | Context | Zustand | | :------------------- | :------------ | :------------ | :----------- | | Update search filter | 47 components | 52 components | 3 components | | Toggle sidebar | 12 components | 52 components | 2 components | | Add new video | 38 components | 52 components | 8 components | The difference? Zustand's granular subscriptions. ## Common Pitfalls ### 1. Over-using Global State ```javascript // ❌ Bad const useGlobalStore = create((set) => ({ // Don't put everything here currentVideoTime: 0, volumeLevel: 100, isPlaying: false, // ... 50 more fields })); // ✅ Good function VideoPlayer({ videoId }) { // Keep player state local const [currentTime, setCurrentTime] = useState(0); const [volume, setVolume] = useState(100); const [isPlaying, setIsPlaying] = useState(false); // Only sync what needs sharing const updateWatchProgress = useVideoStore((state) => state.updateProgress); useEffect(() => { if (currentTime % 10 === 0) { // Every 10 seconds updateWatchProgress(videoId, currentTime); } }, [currentTime]); } ``` ### 2. Creating Too Many Stores ```javascript // ❌ Bad - store per feature useVideoUploadStore; useVideoPlayerStore; useVideoAnalyticsStore; useVideoCommentsStore; // ✅ Good - logical grouping useVideoStore; // All video-related state useUserStore; // User and auth useUIStore; // UI preferences ``` ### 3. Not Using Selectors ```javascript // ❌ Bad - subscribes to entire store function VideoCard({ id }) { const store = useVideoStore(); const video = store.videos.find((v) => v.id === id); } // ✅ Good - precise subscription function VideoCard({ id }) { const video = useVideoStore((state) => state.videos.find((v) => v.id === id)); } ``` ## Managing Server State with React Query We've talked about client state, but what about server state? That's where React Query shines: ```javascript // hooks/useVideos.js import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; export function useVideos(filters) { return useQuery({ queryKey: ["videos", filters], queryFn: () => api.fetchVideos(filters), staleTime: 5 * 60 * 1000, // 5 minutes }); } export function useUploadVideo() { const queryClient = useQueryClient(); return useMutation({ mutationFn: (file) => api.uploadVideo(file), onSuccess: (newVideo) => { // Update cache instantly queryClient.setQueryData(["videos"], (old) => [...old, newVideo]); }, }); } // Usage function VideoList() { const { search, status } = useFilters(); // nuqs for URL state const { data: videos, isLoading } = useVideos({ search, status }); const uploadVideo = useUploadVideo(); if (isLoading) return ; return ( <> {videos.map((video) => ( ))} ); } ``` Why React Query for server state: - Automatic caching and background refetching - Optimistic updates - Request deduplication - Offline support - No global state needed for API data ## The Complete State Management Stack - **Local State**: Component-specific UI state - **Zustand**: Shared client state - **nuqs**: URL state for shareable/persistent state - **React Query**: Server state and caching ## What I'd Do Differently 1. **Start with this architecture** - Not after 3 rewrites 2. **Document state decisions** - Why is this state where it is? 3. **Measure before optimizing** - Use React DevTools Profiler 4. **Keep stores focused** - Resist the mega-store temptation ## The Bottom Line You don't need Redux. You probably don't need Context either. Our current stack handles millions of video operations daily with: - 70% less boilerplate than Redux - 90% fewer unnecessary re-renders than Context - URL state that just works - Local storage persistence for free The best state management is the one you don't notice. Your users don't care if you use Redux, Zustand, or carrier pigeons - they care that the app is fast and works. Start local, lift carefully, and measure everything. Your future self will thank you.