PHONG PHAN
31/7/2025
What is Zustand? Why Its Combination with @tanstack/react-query is the Hottest State Management Trend for Projects Big and Small
In the ever-evolving React ecosystem, state management remains a critical aspect of building scalable and maintainable applications. While Redux has long been the go-to solution, newer libraries like Zustand and @tanstack/react-query (formerly React Query) have taken the spotlight, offering a simpler, more efficient, and modern approach. Together, they form a powerful duo that’s become the trendiest state management solution for projects of all sizes. So, what makes Zustand and TanStack React Query so special, and why is Redux losing its shine? Let’s dive in!
What is Zustand?
Zustand is a lightweight, hook-based state management library for React, developed by the pmndrs team. Unlike traditional state management libraries, Zustand provides a minimalistic API that leverages React Hooks to manage state in a simple, intuitive way. It’s designed to be flexible, performant, and easy to use, with a bundle size of just ~1KB (gzipped). Zustand allows you to create stores to manage global state without the boilerplate-heavy structure of Redux.
Here’s a quick example of a Zustand store:
DummyComponent.jsx
1import create from 'zustand';
2
3interface CounterState {
4 count: number;
5 increase: () => void;
6 decrease: () => void;
7}
8
9const useCounterStore = create<CounterState>((set) => ({
10 count: 0,
11 increase: () => set((state) => ({ count: state.count + 1 })),
12 decrease: () => set((state) => ({ count: state.count - 1 })),
13}));
14
15export default useCounterStore;You can then use this store in a component:
DummyComponent.jsx
1import useCounterStore from './counterStore';
2
3const Counter = () => {
4 const { count, increase, decrease } = useCounterStore();
5 return (
6 <div>
7 <p>Count: {count}</p>
8 <button onClick={increase}>Increase</button>
9 <button onClick={decrease}>Decrease</button>
10 </div>
11 );
12};Zustand’s simplicity, small size, and seamless integration with React Hooks make it a favorite for developers.
What is @tanstack/react-query?
@tanstack/react-query is not a traditional state management library but a powerful tool for managing server state (data fetched from APIs). It simplifies data fetching, caching, synchronization, and error handling, making it an ideal companion for managing asynchronous data in React applications. React Query handles tasks like:
- Automatic caching: Stores fetched data to avoid redundant API calls.
- Optimistic updates: Updates the UI before the server responds.
- Background refetching: Keeps data fresh with minimal effort.
- Error and loading states: Built-in support for handling asynchronous states.
Here’s an example of fetching data with React Query:
DummyComponent.jsx
1import { useQuery } from '@tanstack/react-query';
2
3const fetchTodos = async () => {
4 const response = await fetch('/api/todos');
5 return response.json();
6};
7
8const TodoList = () => {
9 const { data, isLoading, error } = useQuery(['todos'], fetchTodos);
10
11 if (isLoading) return <div>Loading...</div>;
12 if (error) return <div>Error: {error.message}</div>;
13
14 return (
15 <ul>
16 {data.map((todo) => (
17 <li key={todo.id}>{todo.title}</li>
18 ))}
19 </ul>
20 );
21};React Query’s focus on server state makes it a perfect complement to libraries like Zustand, which excels at managing client state.
Why Zustand + @tanstack/react-query is the Ultimate State Management Combo
The combination of Zustand and TanStack React Query has become a trend because it addresses the full spectrum of state management needs—client state (UI-related data) and server state (API data)—in a way that’s simple, scalable, and efficient. Here’s why this duo is dominating:
1. Separation of Concerns
Zustand and React Query split responsibilities cleanly:
- Zustand handles client-side state, such as UI toggles, form inputs, or local application logic (e.g., theme settings or counter values).
- React Query manages server-side state, handling API calls, caching, and synchronization.
This separation avoids the complexity of forcing one library to handle both types of state, which Redux often struggles with. For example, Redux requires middleware like redux-thunk or redux-saga to manage async operations, adding boilerplate and complexity.
2. Minimal Boilerplate
Zustand eliminates the need for Redux’s verbose setup (actions, reducers, dispatchers). Its API is intuitive and hook-based, requiring minimal code to get started. React Query further simplifies server state management by abstracting away the complexities of fetching, caching, and error handling. Together, they reduce development time and make codebases easier to maintain.
3. Performance Optimization
- Zustand: Its small bundle size (~1KB) and selective re-rendering (only components using specific state slices re-render) ensure high performance, even in large applications. Unlike Context API, Zustand doesn’t require wrapping the entire app in a Provider, reducing overhead.
- React Query: Automatic caching and background refetching minimize unnecessary API calls, improving performance for data-heavy applications. Features like query invalidation and optimistic updates make it ideal for real-time apps.
4. Scalability for Projects Big and Small
The Zustand + React Query combo scales effortlessly:
- Small Projects: Zustand’s simplicity and React Query’s out-of-the-box caching make them quick to set up for prototypes or small apps.
- Large Projects: Zustand’s flexible store structure and React Query’s advanced features (e.g., query keys, pagination, and infinite queries) handle complex, data-intensive applications with ease. For example, a large e-commerce app can use Zustand for cart state and React Query for product data fetching.
5. Seamless Integration with Modern React
Both libraries are designed for modern React (Hooks and TypeScript). Zustand leverages Hooks for a natural developer experience, while React Query integrates seamlessly with React’s rendering model. They also support TypeScript natively, ensuring type-safe codebases without extra configuration.
6. Thriving Community and Ecosystem
Zustand and React Query have rapidly growing communities. Zustand’s middleware (e.g., devtools for Redux DevTools integration) and React Query’s extensive documentation and plugins make them developer-friendly. Projects like Awesome Zustand and TanStack’s ecosystem provide resources, examples, and integrations, ensuring long-term support.
Why Redux is Losing Its Shine
Redux, once the king of state management, is no longer the default choice for many developers. Here’s why it’s being overshadowed by Zustand and React Query:
1. Excessive Boilerplate
Redux requires defining actions, reducers, and dispatchers, leading to verbose code. Even with Redux Toolkit, which reduces some boilerplate, it’s still more complex than Zustand’s minimal API. For example, creating a simple counter in Redux involves multiple files, whereas Zustand handles it in a single store.
2. Poor Handling of Server State
Redux wasn’t designed for server state management. Handling async operations requires middleware like redux-thunk or redux-saga, which add complexity and learning curves. React Query, by contrast, is purpose-built for server state, offering caching, refetching, and error handling out of the box.
3. Performance Concerns
Redux’s global store can lead to unnecessary re-renders if not optimized with tools like reselect. Zustand’s selective updates and React Query’s caching ensure better performance with less effort. For large applications, Redux can become a bottleneck if not carefully managed.
4. Steep Learning Curve
Redux’s concepts (e.g., actions, reducers, immutability) can be intimidating for beginners. Zustand’s hook-based API and React Query’s straightforward query system are more approachable, especially for developers familiar with React Hooks.
5. Outdated for Modern React
Redux predates React Hooks and Concurrent Mode, making it feel less native to modern React workflows. Zustand and React Query are built with Hooks and TypeScript in mind, aligning better with React’s current direction.
Comparison: Zustand + React Query vs. Redux
| Feature | Zustand + React Query | Zustand + React Query Redux |
| Boilerplate | Minimal, hook-based API | High, even with Redux Toolkit |
| Server State | React Query excels with caching, refetching | Requires middleware (thunk, saga) |
| Client State | Zustand’s simple stores | Complex actions/reducers |
| Performance | Selective updates, efficient caching | Can cause re-renders, needs optimization |
| Learning Curve | Easy, Hooks-based | Steeper, complex concepts |
| Bundle Size | ~1KB (Zustand) + ~10KB (React Query) | Larger, especially with middleware |
| Scalability | Great for small to large projects | Best for large, complex projects |
Why This Combo is Ideal for All Projects
The Zustand + React Query combination shines because it’s flexible and scalable:
- Small Projects: Quick setup, minimal configuration, and low bundle size make it ideal for prototypes or MVPs.
- Large Projects: Zustand’s modular stores and React Query’s advanced features (e.g., infinite queries, mutations) handle complex requirements without sacrificing performance.
- Modern Workflows: Native TypeScript support, Hooks integration, and compatibility with Next.js make it a natural fit for modern stacks.
For example, in a social media app, Zustand can manage UI state (e.g., active tab, user preferences), while React Query handles API calls for posts, comments, and notifications, ensuring efficient data fetching and caching.
Conclusion: Embrace the Future of State Management
Zustand and @tanstack/react-query represent the future of state management in React. Their simplicity, performance, and flexibility make them the go-to choice for projects of all sizes, from quick prototypes to enterprise-grade applications. Redux, while still relevant for certain use cases, is being outpaced by these modern alternatives due to its complexity and outdated design.
If you’re looking to streamline your state management and build efficient, scalable React apps, give Zustand and React Query a try. Start with Zustand at zustand-demo.pmnd.rs and explore React Query at tanstack.com/query. Your codebase—and your team—will thank you!