Web Fundamentals

State Management: Choosing the Right Solution

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

State Management: Choosing the Right Solution

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRServer state (API data) → React Query. Client state (UI) → Zustand/Context. Redux for complex workflows.
Very High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

The best state management solution depends on what kind of state you're handling. Separate server state (fetched data that can go stale) from client state (UI-owned data). React Query owns server state. Zustand or Context handles most client state. Redux shines for large, complex apps with heavy workflows.

Server state is rented furniture — it can change when the owner (API) updates it, so you need smart caching and synchronization (React Query). Client state is your own furniture — you fully control it and just need a good place to keep it organized (Zustand/Context). Redux is a big, formal living room for when you have many pieces and many people moving them around.

Server State (API Data)
React Query (caching, refetch, invalidation)
Client State (UI)
Zustand / Context / Redux

1React Context

Built-in solution for low-frequency global state like theme, auth status, or locale. Simple but can cause broad rerenders if overused for high-churn data.

2Zustand

Lightweight, minimal-boilerplate client store with excellent selector-based subscriptions. Ideal for most UI state (filters, modals, forms).

3Redux Toolkit

Structured patterns, powerful DevTools, and middleware. Best for large teams and complex app logic.

4React Query (TanStack Query)

The standard for server state. Handles caching, background refetch, mutations, and optimistic updates automatically.

Key Takeaways
  • ✓Separate server state (React Query) from client state
  • ✓Context for simple global config
  • ✓Zustand for most client/UI state (lightweight & fast)
  • ✓Redux Toolkit for complex apps and large teams
  • ✓Use selectors to prevent unnecessary rerenders
  • ✓Default modern stack: React Query + Zustand
  • ✓Measure rerenders and bundle impact — don’t follow trends blindly
PreviousNext

Topic Guide

On this page