For many React and Next.js apps, yes if you want less boilerplate and hook-based stores. Redux Toolkit still wins when you need a large middleware ecosystem, strict patterns for big teams, or established Redux tooling.
Can I use Zustand with Next.js App Router and SSR?
Yes. Keep stores client-side, avoid leaking per-request state across users, and prefer server data tools (Server Components, TanStack Query) for server state. Use per-request store factories when you need SSR-safe client hydration patterns.
When should I still choose Redux Toolkit?
Choose Redux Toolkit for complex async middleware needs, time-travel/debug workflows your team relies on, large multi-team codebases that benefit from explicit actions, or when existing Redux infrastructure is already deep.
Should Zustand replace React Query / TanStack Query?
No. Zustand is for client/UI state; TanStack Query is for server/async cache. Many Next.js apps use both: Query for remote data, Zustand for shared UI and client-only state.
Zustand vs Redux is the usual fork when useState and useContext start fighting you: shared client state, carts, UI flags, multi-step flows. Redux (especially Toolkit) is still the heavy-duty default; Zustand is the smaller, hook-first store many Next.js apps prefer when they do not need the full Redux ecosystem.
Below: how Zustand works, a side-by-side with Redux, a small store example, and when Redux Toolkit still wins—including notes that matter under the App Router.
What Is Zustand?
Zustand (German for "state") is a small, fast, and scalable state-management solution built by the creators of Jotai and React Spring. It's unopinionated and leverages native React hooks to create centralized state stores with minimal boilerplate.
At just 3.5kB (minified and gzipped), Zustand is significantly smaller than Redux (which is around 6kB for the core library alone, not including Redux Toolkit). This lightweight footprint doesn't sacrifice functionality — Zustand provides everything you need for effective state management.
Key Features
Minimal API — Learn the entire API in minutes, not hours
Hook-based — Access state with a simple hook, no providers needed
No boilerplate — No actions, action creators, dispatchers, or reducers required
TypeScript ready — Excellent type inference out of the box
Middleware support — Includes devtools, persistence, and more
Transactional updates — Batch multiple state updates for better performance
External store support — Use Zustand outside of React components
Zustand vs Redux: A Real-World Comparison
Let's compare Zustand and Redux by implementing the same feature: a shopping cart. This will highlight the practical differences between the two libraries.
Redux Implementation
Here's how you'd implement a shopping cart with Redux:
Redux requires setting up a store, slices, and wrapping your app in a Provider
Zustand needs just a single store file, no providers needed
Code Volume:
Redux: ~80 lines for the store setup
Zustand: ~40 lines for the same functionality
Component Integration:
Redux: Components need useDispatch and useSelector hooks
Zustand: A single hook gives access to both state and actions
Learning Curve:
Redux has concepts like actions, reducers, dispatch, and middleware
Zustand has a single mental model: stores with state and functions
Real-World Use Case: Building a Task Management App
Let's build a more complete example: a task management app with Zustand. This will demonstrate how to handle complex state interactions, async operations, and middleware.
// Example of a store with async actions and loading states
const useProductStore = create((set) => ({
products: [],
loading: false,
error: null,
fetchProducts: async (category) => {
set({ loading: true, error: null });
try {
const response = await fetch(`/api/products?category=${category}`);
if (!response.ok) {
throw new Error('Failed to fetch products');
}
const products = await response.json();
set({ products, loading: false });
} catch (error) {
set({ error: error.message, loading: false });
console.error('Error fetching products:', error);
}
}
}));
// Usage in a component
function ProductList({ category }) {
const { products, loading, error, fetchProducts } = useProductStore();
useEffect(() => {
// Only fetch if we don't have any products yet
if (products.length === 0) {
fetchProducts(category);
}
}, [category, fetchProducts]);
if (loading) return <p>Loading products...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div className="product-grid">
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}
Performance Optimization
Zustand is designed to be efficient, but there are still ways to optimize performance:
1. Selective Subscriptions
Only subscribe to the parts of the state you need:
jsx
// Bad: Component will re-render on ANY state change
function Counter() {
const state = useCounterStore();
return <div>{state.count}</div>;
}
// Good: Component only re-renders when count changes
function Counter() {
const count = useCounterStore(state => state.count);
return <div>{count}</div>;
}
Zustand uses strict equality (===) by default. For objects, use shallow comparison:
jsx
import { shallow } from 'zustand/shallow';
function UserProfile() {
// Only re-renders when firstName OR lastName change
const { firstName, lastName } = useUserStore(
state => ({
firstName: state.firstName,
lastName: state.lastName
}),
shallow // Use shallow equality
);
return <div>{firstName} {lastName}</div>;
}
When to Choose Zustand Over Redux
Choose Zustand when:
You want simplicity — Your team wants to avoid the Redux boilerplate and concepts
You're building a small to medium app — Zustand's simplicity shines in less complex applications
You prefer hooks — Your team is comfortable with React hooks and functional components
You need quick setup — You want to get started with minimal configuration
You value bundle size — You're concerned about adding unnecessary weight to your app
Choose Redux when:
You need extensive middleware — Your app relies heavily on middleware for complex async flows
You want a mature ecosystem — You need access to the wide range of Redux tools and extensions
You prefer strict patterns — Your team benefits from Redux's opinionated structure
You have a large team — The explicit nature of Redux can help with onboarding and maintenance
You're building a complex app — Redux's architecture may scale better for very complex state needs
Conclusion
Zustand represents a significant step forward in React state management, offering a simpler alternative to Redux without sacrificing power or flexibility. Its hook-based API, minimal boilerplate, and intuitive design make it an excellent choice for modern React applications.
By embracing Zustand, you can:
Reduce the complexity of your state management code
Improve developer experience and productivity
Create more maintainable applications
Achieve better performance with less effort
Whether you're building a small personal project or a medium-sized application, Zustand provides the right balance of simplicity and power. And with its growing ecosystem and active community, it's well-positioned to be a leading state management solution in the React landscape for years to come.
FAQ
Is Zustand better than Redux in 2026?
For many React and Next.js apps, yes if you want less boilerplate and hook-based stores. Redux Toolkit still wins when you need a large middleware ecosystem, strict patterns for big teams, or established Redux tooling.
Can I use Zustand with Next.js App Router and SSR?
Yes. Keep stores client-side, avoid leaking per-request state across users, and prefer server data tools (Server Components, TanStack Query) for server state. Use per-request store factories when you need SSR-safe client hydration patterns.
When should I still choose Redux Toolkit?
Choose Redux Toolkit for complex async middleware needs, time-travel/debug workflows your team relies on, large multi-team codebases that benefit from explicit actions, or when existing Redux infrastructure is already deep.
Should Zustand replace React Query / TanStack Query?
No. Zustand is for client/UI state; TanStack Query is for server/async cache. Many Next.js apps use both: Query for remote data, Zustand for shared UI and client-only state.
