I’ve been building React applications for years, and one pattern keeps causing headaches. I’d start a project, reach for a state management library, and try to make it handle everything. My global store would become a messy mix of API data, UI toggles, form states, and user preferences. Fetching, caching, and updating that server data manually was a constant chore. Then I discovered a better way: letting two specialized tools do what they’re best at.
The core idea is simple but powerful. Your application deals with two fundamentally different types of state. First, there’s server state. This is data that lives on a remote server—user profiles, product lists, dashboard metrics. It’s shared, can become outdated, and requires asynchronous operations to manage. Then, there’s client state. This is local to the app—is a modal open? What theme is selected? What’s the current value in a form field before it’s submitted? It’s synchronous and private to the UI.
Mixing these is where complexity breeds. Have you ever written a setLoading action in your Redux store just to show a spinner during a fetch? That’s a sign.
This is where the duo of React Query and Zustand shines. They are not competitors; they are partners, each managing a distinct layer of your application’s state. React Query is the dedicated library for everything related to server state. It fetches data, caches it intelligently, updates it in the background, and handles all the loading and error states for you. Zustand is a minimal, unopinionated library perfect for your global client state. It gives you a simple store with a straightforward API to manage UI-related values.
Why force one tool to do two incompatible jobs when you can use two experts?
Let’s look at how they work separately, then together. React Query operates around the concept of queries and mutations. A query is a declarative dependency on some asynchronous data. You tell React Query how to fetch it, and it handles the rest. Here’s a basic example:
import { useQuery } from '@tanstack/react-query';
function UserProfile({ userId }) {
const { data, isLoading, error } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json())
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>Hello, {data.name}</div>;
}See what’s missing? There’s no useState for isLoading, no useEffect to trigger the fetch. React Query manages that entire lifecycle. It will cache this user data under the key ['user', 1], refetch it when the component remounts, and even update it in the background under certain conditions. Your component just declares what it needs.
Now, for client state, we have Zustand. Creating a store is remarkably simple. Imagine we need to manage a global theme and a sidebar visibility state.
import { create } from 'zustand';
const useUIStore = create((set) => ({
theme: 'light',
isSidebarOpen: false,
toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
setSidebarOpen: (isOpen) => set({ isSidebarOpen: isOpen }),
}));
// Using it in a component
function ThemeToggle() {
const { theme, toggleTheme } = useUIStore();
return <button onClick={toggleTheme}>Current theme: {theme}</button>;
}The state is global, but the API feels local. Components subscribe only to the pieces of state they use, which keeps re-renders efficient. There are no dispatchers, no reducers, just direct state updates.
So, how do they meet? The integration happens naturally in your components and application logic. A component might use Zustand to read a client preference and React Query to fetch data based on that preference.
Consider a dashboard. You might store the user’s selected date range filter in Zustand because it’s a UI preference. Then, you use that value from the Zustand store inside your React Query query key. When the user changes the date range, the query key changes, which automatically triggers a new, correct data fetch.
import { useQuery } from '@tanstack/react-query';
import useDashboardStore from '../stores/dashboardStore';
function MetricsChart() {
// Client state from Zustand
const { dateRange, chartType } = useDashboardStore();
// Server state from React Query, dependent on client state
const { data } = useQuery({
queryKey: ['dashboardMetrics', dateRange, chartType], // Query key includes Zustand state
queryFn: () => fetchMetrics({ from: dateRange.start, to: dateRange.end, type: chartType }),
});
// ... render chart with data
}This is the clean separation. Zustand manages dateRange and chartType. When they update, the component re-renders. The new values form a new React Query queryKey. React Query sees the key has changed, invalidates the old data, and automatically fetches the new metrics. Each library does its job perfectly.
What about updating server data? You perform a mutation with React Query (like posting a new item), and upon success, you might update some local UI state in Zustand. For instance, after submitting a form to create a new project, you could close a modal stored in Zustand and invalidate the ‘projects list’ query to trigger a refetch.
import { useMutation, useQueryClient } from '@tanstack/react-query';
import useModalStore from '../stores/modalStore';
function NewProjectForm() {
const queryClient = useQueryClient();
const { closeModal } = useModalStore(); // Zustand action
const mutation = useMutation({
mutationFn: (newProject) => fetch('/api/projects', { method: 'POST', body: JSON.stringify(newProject) }),
onSuccess: () => {
// 1. Close the creation modal (client state)
closeModal('newProject');
// 2. Tell React Query to refetch the projects list (server state)
queryClient.invalidateQueries({ queryKey: ['projects'] });
},
});
// ... form logic
}The result is an architecture that is easier to understand, test, and maintain. Server state logic, with all its complexity, is contained within React Query’s system. Client state, which is often more fluid and UI-driven, lives in lightweight Zustand stores. Your components become declarative and focused.
Think about your current project. Can you clearly see the line between what state came from an API and what state was born in the browser? Drawing that line intentionally is the first step toward a more scalable frontend.
This approach has fundamentally changed how I structure applications. It reduces boilerplate, minimizes bugs related to stale data, and makes features easier to add. The mental model is clean: React Query for what the server knows, Zustand for what the app is doing.
If you’ve been wrestling with a monolithic store or intricate useEffect chains for data fetching, I encourage you to try this pattern. Start by moving one API fetch to React Query and one UI control to Zustand. You might be surprised by how much simpler your code becomes.
Did this perspective on separating state resonate with your own experiences? I’d love to hear your thoughts or questions in the comments below. If you found this useful, please consider sharing it with other developers who might be facing similar architectural challenges.
As a best-selling author, I invite you to explore my books on Amazon. Don’t forget to follow me on Medium and show your support. Thank you! Your support means the world!
101 Books
101 Books is an AI-driven publishing company co-founded by author Aarav Joshi. By leveraging advanced AI technology, we keep our publishing costs incredibly low—some books are priced as low as $4—making quality knowledge accessible to everyone.
Check out our book Golang Clean Code available on Amazon.
Stay tuned for updates and exciting news. When shopping for books, search for Aarav Joshi to find more of our titles. Use the provided link to enjoy special discounts!
📘 Checkout my latest ebook for free on my channel!
Be sure to like, share, comment, and subscribe to the channel!
Our Creations
Be sure to check out our creations:
Investor Central | Investor Central Spanish | Investor Central German | Smart Living | Epochs & Echoes | Puzzling Mysteries | Hindutva | Elite Dev | JS Schools
We are on Medium
Tech Koala Insights | Epochs & Echoes World | Investor Central Medium | Puzzling Mysteries Medium | Science & Epochs Medium | Modern Hindutva
