Combining Zustand with React Query for Async Data

Why Combine Zustand and React Query?

React Query is great for:

• ✅ Server cache
• ✅ Async fetch lifecycle
• ✅ Background refetching

Zustand is great for:

• ✅ Local UI state
• ✅ Global flags (loading, auth)
• ✅ Custom derivations and app-specific logic

You can use them together — and many teams do!

---

What Goes in Each Tool?

State Type	Tool
User token, modals	Zustand
Fetched posts	React Query
Sidebar toggle	Zustand
API error overlays	Zustand
Search filters	Zustand (optional)
Mutation response	React Query

---

Sharing Fetched Data via Zustand

You can fetch with React Query and sync it into Zustand:

const { data } = useQuery(["posts"], fetchPosts);

useEffect(() => {
  if (data) usePostStore.getState().setPosts(data);
}, [data]);

Now Zustand holds the same list — for reactivity across pages.

---

Mutations and Cache Syncing

After a mutation, you can:

1. Invalidate the query:

await mutateAsync();
queryClient.invalidateQueries(["posts"]);

2. Or push the updated item into Zustand:

usePostStore.getState().addPost(newPost);

You can even subscribe to query updates in Zustand using .subscribe() if needed.

---

Example Architecture

// React Query for fetches/mutations
// Zustand for UI state and selection

const { data } = useQuery(["posts"], fetchPosts);

useEffect(() => {
  useUIStore.getState().setLoading(false);
}, [data]);

Zustand handles:

• Selection
• Modal open/close
• Filtering UI
• Current tab

React Query handles:

• Fetching + caching
• Retry/fail logic
• Background polling

---

Summary

• Use Zustand for UI, local/global flags, and selection
• Use React Query for async data and API interaction
• You can sync them for shared workflows
• Keep responsibilities separate for clarity and performance

---

Next: Lesson 23 – Real-Time Data Sync with WebSockets and Zustand