Local state vs Redux/Zustand vs server state?
Try code in the playgroundUnderstand the concept
Local state belongs to a nearby component, a client store coordinates shared UI data, and server state represents data owned by a remote service. Server-state tools manage freshness, fetching and invalidation because the browser is only keeping a cached copy. Choosing the owner first prevents duplicated and conflicting sources of truth.
Important ideas
-
Keep small UI state close to the component that uses it.
-
Use a shared store when many features need coordinated client state.
-
A server-state library such as TanStack Query handles fetching, caching and invalidation.
-
Query keys should include the variables that distinguish results, such as tenant, filters and page cursor.
Can you explain it without the notes?
Local state vs Redux/Zustand vs server state?
Use your own words. Explain an example and one limitation before checking the explanation.
Check your explanation
Local state belongs to a nearby component, a client store coordinates shared UI data, and server state represents data owned by a remote service. Server-state tools manage freshness, fetching and invalidation because the browser is only keeping a cached copy. Choosing the owner first prevents duplicated and conflicting sources of truth.
Turn this concept into a clear answer.
- A shared store is not automatically the best place to manually reproduce request caching, retry and invalidation behavior.
Adapted from 06_REACT_NEXTJS.md · “Local state vs Redux/Zustand vs server state?”. Examples are study fragments; framework behavior can depend on your version.