DEV Community

Alex Spinov
Alex Spinov

Posted on

Zustand Has a Free React State Manager — 1KB, No Providers, No Boilerplate

Zustand replaces Redux with 10 lines of code. No providers, no reducers, no actions, no context. Just a hook.

The Redux Problem

Redux Toolkit improved things, but you still need: store setup, slices, providers wrapping your app, dispatch, selectors, and middleware. For a counter, that's 30+ lines across 3 files.

Zustand: create a store in 5 lines, use it anywhere.

What You Get for Free

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));

// Use anywhere — no Provider needed
function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  return <button onClick={increment}>{count}</button>;
}
Enter fullscreen mode Exit fullscreen mode

That's the entire state management solution. No setup. No boilerplate.

1KB gzipped — Redux Toolkit + React-Redux = ~33KB
No Provider — no wrapper component at the root
Selective re-renders — components only re-render when their selected state changes
Works outside ReactuseStore.getState() works in plain functions

Advanced Patterns

Persist to localStorage:

import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({ theme: 'dark', setTheme: (t) => set({ theme: t }) }),
    { name: 'app-settings' }
  )
);
Enter fullscreen mode Exit fullscreen mode

Devtools:

import { devtools } from 'zustand/middleware';
const useStore = create(devtools((set) => ({ ... })));
// Works with Redux DevTools browser extension
Enter fullscreen mode Exit fullscreen mode

Immer integration:

import { immer } from 'zustand/middleware/immer';
const useStore = create(immer((set) => ({
  nested: { deep: { value: 0 } },
  update: () => set((state) => { state.nested.deep.value++; }),
})));
Enter fullscreen mode Exit fullscreen mode

Why Zustand Won

Zustand has more npm downloads than Redux Toolkit. The reason is simple: it does the same thing with 90% less code.

If your React app needs global state and you're still considering Redux — try Zustand for 5 minutes.


Need web scraping or data extraction? Check out my tools on Apify — get structured data from any website in minutes.

Custom solution? Email spinov001@gmail.com — quote in 2 hours.

Top comments (0)