When will you use this?

Use these patterns when data is shared across pages or comes from a server.

• Shopping carts, user sessions, and API data need clear state patterns.
• Teams pick Context, Zustand, or Redux based on app size — you will see all three in jobs.

Real-world: where state lives

Architecture doc for SaaS: server data in Query, UI filters in Zustand, form drafts in local useState, auth in Context.

Production-style code

/*
  Toolliyo state map:
  - TanStack Query → courses, enrollments, quiz results (server)
  - Zustand → sidebar open, active filter chips (client UI)
  - useState → single form field focus, modal open (local)
  - Context → user session, theme (app-wide, low churn)
  - NOT in Redux → avoid duplicating Query cache in Redux
*/
function CoursePage({ id }) {
  const { data: course } = useQuery({ queryKey: ['course', id], queryFn: () => fetchCourse(id) });
  const filter = useFilterStore(s => s.tag);
  const [tab, setTab] = useState('outline');
}

What happens in production: Teams avoid "everything in Redux" anti-pattern — clearer mental model and fewer bugs at scale.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// Server data → TanStack Query
// Global UI (theme, sidebar) → Context or Zustand
// Form typing → local useState
// Cart (needs persist) → Zustand or Redux

Line-by-line walkthrough

How it works (big picture)

• Ask: does this come from the API?
• Use Query.
• Is it only this screen?
• useState.
• Shared across app?
• Context/Zustand/Redux.

Do this on your computer

1. List all data types in your app.
2. Assign each to local, server, or global client state.
3. Avoid duplicating server data in Redux.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Change the initial state value and see the starting UI change.
• Open React DevTools (browser extension) while running Enterprise State Architecture and inspect component props/state.

Remember

Server state → TanStack Query. Local UI → useState. Shared client state → Context/Zustand/Redux by complexity.

Common questions