react-state-management

Start with useState for single-component state, lift to the closest common ancestor when siblings share it, use context for cross-tree values that change infrequently, and reserve Zustand for app-wide client state like theme or current organization.

Server state belongs in the TanStack Query cache, never mirrored into Zustand. The query cache owns fetching, revalidation, and invalidation; duplicating it into a store creates stale copies and sync bugs.

Lift state only when a second consumer appears, and only to the closest common ancestor. Lifting preemptively in case it is needed later is a YAGNI anti-pattern that adds coupling without benefit.

Every consumer rerenders when the context value changes, so high-frequency values like mouse position cause whole-tree rerenders. Split contexts by change rate, memoize provider values, and use refs or selector-based Zustand reads for frequent updates.

Use useReducer when state transitions involve three or more actions or encode invariants, such as a wizard form. For simple two-action state, useState is sufficient and less verbose.