Zustand and React Query for React State Management Without Boilerplate

js

Zustand and React Query for React State Management Without Boilerplate

Learn how Zustand and React Query simplify React state management, reduce boilerplate, and improve performance. Build cleaner apps faster.

Apr 13, 2026

Zustand and React Query for React State Management Without Boilerplate

I’ve spent countless hours refining React applications, and a common pain point always surfaces: how to manage state without drowning in complexity. Just last week, I was refactoring a project bogged down by excessive boilerplate, and it hit me—the elegance of combining Zustand with React Query. This approach cleans up both client and server state, making apps faster and easier to maintain. If you’re tired of bulky solutions, stick with me. I’ll show you how this duo can transform your workflow, and I encourage you to share your own experiences in the comments later.

Let’s start with Zustand. It’s a tiny library that handles client-side state, like toggles, themes, or form inputs. You get a straightforward store without the ceremony of larger tools. Imagine setting up a dark mode switch in minutes. Here’s a basic example:

import create from 'zustand';

const useThemeStore = create((set) => ({
  darkMode: false,
  toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
}));

// In a component
function ThemeToggle() {
  const { darkMode, toggleDarkMode } = useThemeStore();
  return <button onClick={toggleDarkMode}>{darkMode ? 'Light' : 'Dark'}</button>;
}

This code creates a store with minimal fuss. But what happens when you need data from a server? That’s where things often get messy. Have you ever mixed API calls with local state, only to face caching issues or slow updates?

Enter React Query. It treats server data as a separate concern, handling fetching, caching, and background updates seamlessly. You don’t need to manage loading states or errors manually—it does the heavy lifting. For instance, fetching user data becomes simple:

import { useQuery } from 'react-query';

function UserProfile() {
  const { data, isLoading, error } = useQuery('userData', () =>
    fetch('/api/user').then(res => res.json())
  );
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Hello, {data.name}!</div>;
}

React Query ensures your UI stays responsive and data stays fresh. But how do these two libraries work together? The magic lies in their independence. Zustand manages what happens on the client, while React Query handles server communication. They don’t force integration, which keeps your code clean.

Consider a search feature. You might store the search query in Zustand and use it to fetch results with React Query. Here’s how that looks:

import create from 'zustand';
import { useQuery } from 'react-query';

const useSearchStore = create((set) => ({
  query: '',
  setQuery: (newQuery) => set({ query: newQuery }),
}));

function SearchResults() {
  const { query } = useSearchStore();
  const { data, isLoading } = useQuery(
    ['search', query], // Query key includes the Zustand state
    () => fetch(`/api/search?q=${query}`).then(res => res.json()),
    { enabled: !!query } // Only fetch when query is not empty
  );
  return (
    <div>
      <input onChange={(e) => useSearchStore.getState().setQuery(e.target.value)} />
      {isLoading ? <p>Searching...</p> : <ul>{data?.map(item => <li key={item.id}>{item.name}</li>)}</ul>}
    </div>
  );
}

This setup creates a reactive pipeline. When the query changes in Zustand, React Query automatically refetches data. It’s efficient and easy to debug. Why deal with scattered state when you can have a clear separation?

I used this pattern in a recent e-commerce project. We had filters for products stored in Zustand, and React Query fetched filtered data based on those values. It cut development time in half because we didn’t need to write custom caching logic. What parts of your app could benefit from this split?

Another advantage is testing. Since Zustand and React Query don’t depend on each other, you can test them in isolation. Mock the store for UI tests and mock API calls for data tests. It simplifies your test suites and makes them more reliable.

But let’s address a common concern: performance. Both libraries are lightweight. Zustand is under 2 KB, and React Query adds minimal overhead. Together, they prevent the bloat that comes with monolithic state managers. Your bundle size stays small, and your app runs faster. How often have you seen performance lag from oversized libraries?

For server synchronization, React Query offers background updates and optimistic mutations. You can update the UI immediately while the server processes changes, then sync accordingly. Combine this with Zustand for local UI feedback, and you get a smooth user experience. Here’s a quick example with a like button:

const useLikesStore = create((set) => ({
  likes: 0,
  incrementLike: () => set((state) => ({ likes: state.likes + 1 })),
}));

function LikeButton() {
  const { likes, incrementLike } = useLikesStore();
  const mutation = useMutation(() => fetch('/api/like', { method: 'POST' }), {
    onMutate: () => {
      incrementLike(); // Optimistic update with Zustand
    },
  });
  return <button onClick={() => mutation.mutate()}>Likes: {likes}</button>;
}

This approach feels instantaneous to users. Have you tried optimistic updates before, and how did it impact your app’s feel?

Scaling is straightforward too. As your app grows, you can add more Zustand stores for different features, while React Query manages all server interactions. There’s no need to rewrite everything or introduce complex middleware. It’s a flexible foundation that adapts to your needs.

I remember helping a team migrate from Redux to this combination. They were hesitant at first, but after seeing how much code they could delete, they became advocates. The reduction in boilerplate was staggering, and debugging became easier because state sources were clear.

What about error handling? React Query provides built-in retry and error states, while Zustand keeps your UI stable. You can show error messages from React Query and use Zustand to control modals or alerts. It’s a cohesive way to manage failures without cluttering your components.

Let’s not forget developer experience. Both libraries have excellent TypeScript support, which catches errors early. The APIs are intuitive, so new team members can get up to speed quickly. How much time do you spend onboarding developers to complex state systems?

In conclusion, pairing Zustand with React Query offers a modern solution to state management. It’s lightweight, powerful, and scales beautifully. From my experience, it reduces bugs and boosts productivity. If you’re building React apps, give this combination a try. Share your thoughts in the comments below—I’d love to hear how it works for you. If this article helped, please like and share it with others who might benefit. Let’s build better software together.

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:

We are on Medium

Share: Facebook Twitter Reddit LinkedIn WhatsApp Telegram Pinterest Email Instagram

js