Practice & Assessment
Test your understanding of State Management with Zustand and React Query
Multiple Choice Questions
5Which type of state should be managed with React Query?
In Zustand, how do you prevent a component from re-rendering when unrelated store state changes?
What happens when two components use the same React Query queryKey?
What should you call after a successful mutation to keep the UI in sync with the server?
What is wrong with storing API response data in Zustand?
Coding Challenges
1Product Catalog with Filters and Cart
Build a product catalog page. Fetch products from https://fakestoreapi.com/products using React Query's useQuery (queryKey: ['products']). Store active category filter and cart items in a Zustand store. Display products filtered by the selected category. Add-to-cart button calls a Zustand action. A CartSummary component shows item count from Zustand without prop drilling. Show loading and error states from React Query. No mutations needed. Expected output: filterable product list with working cart counter. Estimated time: 30 minutes.
Mini Project
Full-Stack Task Manager Dashboard
Build a task manager using React Query + Zustand. API: use https://jsonplaceholder.typicode.com/todos. Features: fetch all todos with useQuery (paginated — 10 per page), add a todo with useMutation + invalidateQueries, toggle complete with useMutation + optimistic update, store filter (all/active/completed) and current page in Zustand. Components: TaskList, TaskItem, AddTaskForm, FilterBar, PaginationControls. Show loading skeletons during fetch. Show mutation error messages. Handle empty states.