state-management

State management patterns for React applications with Context, Redux, Zustand, and React Query. Distinguish between local and global state. Decision Criteria : Local State : Used only within a single component Global State : Shared across multiple components Example : Suitable for lightweight global state management. Example (Authentication Context): Usage : Simpler than Redux with less boilerplate. Installation : Example (Shopping Cart): Usage : Use when complex state logic and middleware are required. Installation : Example (Todo): Usage : Specialized for API data fetching and caching. State Immutability : Never mutate state directly Minimal State Principle : Do not store derivable values in state Single Source of Truth : Do not duplicate the same data in multiple places Excessive Props Drilling : Prohibited when passing props through 5+ levels Avoid Making Everything Global State : Prefer local state when sufficient Selective Subscription : Subscribe only to the state you need Clear Action Names : update → updateUserProfile Use TypeScript : Ensure type safety #state-management #React #Redux #Zustand #Context #global-state #frontend - Choose Context API for simple global state, Zustand for medium complexity, Redux Toolkit for large-scale apps with complex logic, and React Query for server data fetching and caching - Covers local vs. global state decisions, immutability...