Zustand
zustand.docs.pmnd.rs
Zustand: Introduction
Index of documentation for pmndrs/* libraries
GitHub
github.com › pmndrs › zustand
GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React
State has to be updated immutably and the set function merges state to help it. import { create } from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), ...
Starred by 57.9K users
Forked by 2K users
Languages TypeScript 97.9% | JavaScript 2.1%
Do I need Zustand?
You don't need anything. I'd say for the most part it's just a nicer and less boilerplaty API than Context, you just create a store with values and setters and start consuming them, as well as having some extremely nice middleware to mirror your stores into localStorage or sessionStorage without even thinking about it. It'll also not re-render the entire tree on changes (which supposedly Context does, but people still debate every single day whether this is true or not so regardless of what I say someone is gonna tell me elsewise), but only the components that are dependent on the data changing. More on reddit.com
51
45
November 3, 2024Downsides to Zustand & React Query at scale?
Hey there, I had similar concerns about zustand vs redux at scale recently and I couldn’t really find any answers online with actual experience of using zustand at scale. Based on my own research though, I think you can scale zustand up by splitting the store into slices . Redux Toolkit (RTK) also uses this pattern with its createSlice api. However, if you’re using zustand with typescript, you’ll need to add type annotations accordingly, see here. With that being said, i recently started using react query on one of my projects, and it seems to scale very well. The app is basically just a lot of CRUD functionality in isolated modules. So there’s a lot of server state which react query manages very nicely. In fact, we haven’t had to use any global client state manager like zustand or redux yet. So maybe you can also consider whether you’ll have any truly global client state that needs to be stored in zustand or redux. You can read more about this here. Edit: grammar More on reddit.com
44
50
January 1, 2024Redux Vs Zustand
Wait until you see the other two state frameworks the Zustand guy made More on reddit.com
71
56
February 20, 2025Zustand = 🔥
Zustand is amazing. I hope it will keep growing and eventually overthrow Redux More on reddit.com
162
333
March 20, 2023Videos
05:00
5 Zustand BEST Practices in 5 Minutes - YouTube
Zustand Beginner Tutorial - Learn React State Management ...
16:39
📝 React and Zustand Unite: The Ultimate Todo List Tutorial - ...
01:04:35
React State Management with Zustand & TypeScript - YouTube
01:15:24
Zustand React State Management Course (Simple Redux Alternative) ...
Medium
medium.com › globant › react-state-management-b0c81e0cbbf3
React State Management — using Zustand | by Chikku George | Globant | Medium
February 15, 2024 - Create your React application using the below command. ... Go to the project’s directory and install the zustand dependency to manage the React state.
Zustand
zustand-demo.pmnd.rs
Zustand
🐻 Bear necessities for state management in React
GeeksforGeeks
geeksforgeeks.org › typescript › introduction-to-zustand
Zustand State Management Guide for React & Next.js - GeeksforGeeks
September 6, 2025 - Indirect State Managers: Libraries like React Router (for routing) and React Query (for data fetching) can handle state indirectly when combined with native hooks. Direct State Managers: Dedicated libraries like Redux, Zustand, Jotai, and Valtio are used specifically for global state management.
Js
react-tracked.js.org › person name (zustand)
Tutorial with zustand - Person Name | React Tracked
import * as React from 'react'; import { useState } from 'react'; import create from 'zustand'; import { createTrackedSelector } from 'react-tracked'; const useStore = create((set) => ({ firstName: 'React', lastName: 'Tracked', setFirstName: (firstName) => set({ firstName }), setLastName: (lastName) => set({ lastName }), })); const useTrackedStore = createTrackedSelector(useStore); const EditPerson = () => { const state = useTrackedStore(); return ( <div> <div> First Name: <input value={state.firstName} onChange={(e) => state.setFirstName(e.target.value)} /> </div> <div> Last Name: <input valu
Refine
refine.dev › home › blog › integrations › how to use zustand
How to use Zustand | Refine
August 2, 2024 - They are like dispatch actions in React-Redux, they are used to effect changes in the store. For example, our incrCounter is an action, we call the set function inside it to update the counter state.
DEV Community
dev.to › franklin030601 › using-zustand-with-react-js-9di
Using Zustand with React JS! 🚀 - DEV Community
August 26, 2022 - Check out OvermindJS. It looks like it is the more fleshed out version of Zustand, but with immer already integrated. We use it in two of our React projects and we never looked back at redux (especially not at redux-saga).
DEV Community
dev.to › ricardogesteves › zustand-when-how-and-why-1kpi
Zustand, When, how and why - DEV Community
September 3, 2024 - Devtools support: Zustand integrates well with Redux DevTools for debugging. Framework agnostic: While primarily used with React, Zustand can be used in any JavaScript environment.
Medium
medium.com › @ignatovich.dm › managing-react-state-with-zustand-4e4d6bb50722
Managing React state with Zustand | by Frontend Highlights | Medium
October 27, 2024 - Managing React state with Zustand Zustand is a small, fast, and scalable state management library for React, often regarded as a simpler alternative to Redux. Created by Jotai and React-spring …
YouTube
youtube.com › watch
Zustand - Complete Tutorial - YouTube
✨ Cosden Code → https://cosdencode.com📥 Import React (Newsletter) → https://cosden.solutions/newsletter?s=ytdJoin The Discord! → https://discord.cosdensolu...
Published December 18, 2023
The Software House
tsh.io › blog › zustand-react
Zustand. React state management set up in a few minutes
February 21, 2023 - This is really important because this is exactly how you modify the store data in Zustand! It’s really similar to how you modify state in React because in order to achieve that you need to call setState() function or your custom state-setting function coming from u_seState_ hook. Back to our example – the last thing we did was to pass the state argument to set() callback and return the modified data.
CodeSandbox
codesandbox.io › examples › package › zustand
zustand examples - CodeSandbox
react-three-fiber-starterreact-three-fiber with react-spring · zustand-persist-example · roadmanfong · zustand-react-ts · wangyu.frontend · hackboxA fully open-sourced light weight web IDE · Three-fiber-template · mwwalex · game · raycast-vehicleUsing use-cannon / cannon-es to implement a raycast vehicle.
TkDodo
tkdodo.eu › blog › zustand-and-react-context
Zustand and React Context
April 14, 2024 - One example from the past I can think of is a complex, multi-selection group component from our design-system. It was using local state passed down with React Context to manage the internal state of the selections.
Medium
medium.com › @masoudit › the-complete-guide-to-using-zustand-as-a-state-manager-in-a-react-app-c63c88fe7729
Using Zustand in a React App with Complete Example | by MasoudIt | Medium
January 21, 2024 - To witness the results firsthand, run the project and explore the complete demo showcasing the implementation of Zustand in a sample project. You can find the code in the following repository: React Summit GitHub Repository. In addition to the code above, you’ll discover another example demonstrating the use of Zustand, specifically featuring the Persist API.
TkDodo
tkdodo.eu › blog › working-with-zustand
Working with Zustand
November 20, 2022 - One of them that I quickly grew to like was Zustand (opens in a new window). It’s a tiny library (v4.1.4 is 1.1kB Minified + Gzipped) that provides a simple API to create global state stores and subscribe to them via selectors. This pattern is conceptually similar to what Redux is doing, which is already known by many developers. Much like React itself, Zustand is not opinionated.
Medium
medium.com › @joris.l › tutorial-zustand-a-simple-and-powerful-state-management-solution-9ad4d06d5334
[Tutorial] Zustand: A Simple and Powerful State Management Solution | by Joris L. | Medium
June 26, 2023 - [Tutorial] Zustand: A Simple and Powerful State Management Solution If you’re building a React application, chances are you need to manage some state. There are many state management libraries …
npm
npmjs.com › package › zustand
zustand - npm
March 16, 2026 - State has to be updated immutably and the set function merges state to help it. import { create } from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), ...
» npm install zustand
Published Mar 16, 2026
Version 5.0.12
Frontend Masters
frontendmasters.com › blog › introducing-zustand
Introducing Zustand (State Management) – Frontend Masters Blog
My god that syntax has reacted the point of insanity. The cure looks just as bad as the desease syntactically. ... That’s why it’s called Zustand. Yes, Zustand is German for “state”, but in colloquial language it can also mean “mess” ...
Awesomedevin
awesomedevin.github.io › zustand (react)
zustand (React) | ZUSTAND
import { create } from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), }))