SkillByAIOpen interactive version →

Lesson 2 / 25

When You Need a Store

And when React state, Context or a server cache is better.

Signals that a store helps

A global store pays off when many components far apart in the tree read and update the same client-owned data, when updates follow non-trivial rules you want to keep in one place, when you want to inspect or replay changes in DevTools, or when logic must run outside components. It is usually not needed for data that comes from an API: a server-cache library such as TanStack Query or RTK Query handles fetching, caching and refetching better than hand-written reducers. React Context is fine for values that change rarely (theme, locale, the current user object) but every consumer re-renders when the context value changes.

A decision sketch

Rules of thumb, not laws.

used by one component or a small subtree        -> useState / useReducer
changes rarely, read in many places (theme)      -> React Context
fetched from a server, needs caching/refetching  -> TanStack Query or RTK Query
client-owned, shared widely, updated often       -> Zustand or Redux Toolkit
complex rules, many contributors, DevTools/time travel valued -> Redux Toolkit

A notice board versus sticky notes

Sticky notes on your own desk are local state. A shared notice board in the hallway is a store: worth having when many people need the same information, overkill for a personal reminder.

Quick check: For data fetched from a REST API with caching and refetch needs, what is usually the best fit?

  • A server-cache library such as TanStack Query or RTK Query
  • A hand-written Redux reducer for every endpoint
  • React Context with useState
  • localStorage
Answer

A server-cache library such as TanStack Query or RTK Query — Server-cache libraries handle loading flags, deduplication, staleness and invalidation for you.