zustand docs - Brave Search

zustand.docs.pmnd.rs

Zustand: Introduction

Index of documentation for pmndrs/* libraries

github.com › pmndrs › zustand

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

You can try a live demo and read the docs. ... ⚠️ This readme is written for JavaScript users. If you are a TypeScript user, be sure to check out our TypeScript Usage section. Your store is a hook! You can put anything in it: primitives, objects, functions. 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 })), removeAllBears: () => set({ bears: 0 }), }))

Starred by 57.9K users

Forked by 2K users

Languages TypeScript 97.9% | JavaScript 2.1%

Videos

5 Zustand BEST Practices in 5 Minutes - YouTube

Zustand - Complete Tutorial - YouTube

December 18, 2023

Mastering Zustand For React State Management - YouTube

Zustand - Complete Tutorial ( with Project ) 🔥🔥 - YouTube

October 6, 2024

How to Setup Zustand (State Management) with React and TypeScript ...

September 24, 2024

zustand-demo.pmnd.rs

🐻 Bear necessities for state management in React

medium.com › globant › react-state-management-b0c81e0cbbf3

React State Management — using Zustand | by Chikku George | Globant | Medium

February 15, 2024 - The Zustand library is an ideal remedy for managing your React state. It is much simpler and has less boilerplate than Redux. You can also explore different state management libraries to find the right one for your application. https://docs...

Frontend Masters

frontendmasters.com › blog › introducing-zustand

Introducing Zustand (State Management) – Frontend Masters Blog

The full Zustand docs are here.

refine.dev › home › blog › integrations › how to use zustand

How to use Zustand | Refine

August 2, 2024 - Using async actions Actions in zustand also support asynchronicity. In fact, according to Zustand docs, zustand does not care if your action is asynchronous or not. We can perform an asynchronous function in an action.

tkdodo.eu › blog › working-with-zustand

Working with Zustand

November 20, 2022 - While selectors are optional in Zustand, I think they should always be used. Even if we have a store with just a single state value, I’d write a custom hook solely to be able to add more state in the future. This is already explained in the docs (opens in a new window), so I’ll keep it ...

Find elsewhere

Google Bing Mojeek

youtube.com › watch

Zustand Beginner Tutorial - Learn React State Management ...

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

tkdodo.eu › blog › zustand-and-react-context

Zustand and React Context

April 14, 2024 - So even though the zustand docs (opens in a new window) pride themselves about not needing a Context Provider to access a store, I think knowing how to combine store creation with React Context can come in quite handy in situations where encapsulation and reusability are required.

github.com › pmndrs › zustand › discussions › 2415

What web framework is used to build the Zustand documentation? · pmndrs/zustand · Discussion #2415

Hey, I just found out about the Zustand documentation, looks similar as if it were built with docusaurus, but it doesn't, or is it docusaurus or nextra?. Neither of those packages exists on the pac...

Author pmndrs

github.com › pmndrs › zustand › discussions › 1033

Zustand docs and website team · pmndrs/zustand · Discussion #1033

Taking a look at jotai's official docs website, the documentation is clear and very useful. The https://zustand.surge.sh/ website is pretty to look at...but does not offer anything useful or practical in terms of documentation (must go to github for documentation).

Author pmndrs

github.com › pmndrs › zustand › blob › main › docs › getting-started › comparison.md

zustand/docs/getting-started/comparison.md at main · pmndrs/zustand

Zustand is one of many state management libraries for React.

Author pmndrs

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 }), }))

onlydust.com › repositories › pmndrs › zustand

zustand – Open Source Repository | OnlyDust

Explore zustand, an open source project listed on OnlyDust. Find issues to contribute to and follow ongoing activity from the community.

blog.logrocket.com › home › zustand adoption guide: overview, examples, and alternatives

Zustand adoption guide: Overview, examples, and alternatives - LogRocket Blog

August 27, 2024 - The guides go from providing instructions with few lines of code to advanced steps and highlight various recommendations for production-ready applications. The documentation provides a comparison page detailing how Zustand compares and shares similarities with Redux, Jotai, Recoil, and Valtio

reddit.com › r/reactjs › looking for help on how to use zustand in a large project with complex updates.

r/reactjs on Reddit: Looking for help on how to use Zustand in a large project with complex updates.

March 15, 2024 -

I haven't worked much with state management, at my last job that was already done and the responsibility of a specific team.

I have read the Zustand documentation, but I am confused on other use cases then the most simple use case. Particularly how set() is supposed to work, and it's limits.

Zustand has an Immer middleware, but I have a hard time understanding what it does, and why I should use it over Immer directly. When I do use get() with immer, I keep getting errors from state being Writable and whatever I get() is the actual object, that can't be assigned to a Writable object.
Side Effects. One action might need to do both a get and several sets. Should they be in the same set()? Or chained? I might have to get() an object, update it, then add it's id to changedIds.

I've been trying to find tutorials and examples that show more complex use cases but I've had no luck so far.

Really greateful for any tips, particularly open source projects on GitHub.

Depends on your use case, but if you truly build a large app with multiple people working on it, I would prepare for some extra effort you have to put into state management, because zustand is very basic. Basically, I see it this way, Zustand in a big project is great, if you need an unopiniated basis to built your own state management, otherwise, you might want to use batteries included frameworks like redux/mobx and so on. Some general things, I can recommend for a big project, with complex updates: Wrap createStore in a custom-function that always applies all the middlewares you need in your project. Noones wants to apply all the middlewares manually everytime they create a store. Use reduxdevtools-middleware for debugging (If you seperate actions from the state, you can build a custom wrapper that always injects a "set"-function with a proper debug info, so not all actions are displayed as "anonymous" in the devtools) Everytime set finishes and updates the state, it triggers all selectors of a particular store. It will not cause a rerender of react for every set, because react batches in intervals, but it might still be costly, if you have alot of expensive selectors. When using immer, my recommendation for "set" is to do as much updates as possible inside the set function, and only use mutliple "sets" if you have async stuff you need to do or when you call another action. Use proxy-memoize for expensive selectors. It is alot less headache than reselect for everyone working on the project Decide early if you want to use one big store, or mutliple independent stores. One big store is easier to use (I still would add a custom abstractions like slices in redux, you can find examples for that in the zustand documentation), but you can run into performance bottlenecks, if not properly maintained. Multiple small store will most likely never run into any performance bottlenecks, but are harder to use when you need to aggregate data from multiple stores. In general, if you are not an experienced developer, I do not recommend using Zustand for a big project, unless your state is very simple. It is for that reason, I don't understand why zustand v5 focuses on an even smaller bundle size instead of adding more documentation and more useful middlewares (like a proper computed values middleware, or a better devtools support without anonymous functions). The API is really great, it just lacks some built-in functionality and documentation at this point.

For large project, seperate the state to different stores. And maybe take a look this, No more complex concepts with use-one.js 👇: // stores/count.ts import { create, persistStore, isClient } from 'use-one'; import { produce } from 'immer'; const initialState = { count: 0 }; const [use, store] = create(initialState); isClient && persistStore(store, {key: '@count-info'}); const computed = { get state() { return store.getState(); }, }; const actions = { use, produce(cb: (state: typeof initialState) => void) { store.setState(produce(cb)); }, increment() { this.produce((state) => { state.count++; }); }, decrement() { this.produce((state) => { state.count--; }); }, }; export const countStore = Object.assign(actions, computed, store); // Usage in components export function HelloOne() { countStore.use(); return {JSON.stringify(countStore.state)} } https://www.npmjs.com/package/use-one

graphqleditor.com › blog › zustand

Zustand - react state management made easy

February 19, 2023 - Zustand's docs boast it may be the only state managers to get all of these right and from what I could find that just may be the case.

docs.openreplay.com › en › v1.9.0 › plugins › zustand

Zustand - OpenReplay Documentation

import create from "zustand"; const tracker = new Tracker({ projectKey: YOUR_PROJECT_KEY, }); const zustandPlugin = tracker.use(trackerZustand()) // name is optional, randomly generated // string if its undefined const bearStoreLogger = zustandPlugin('bear_store') const useBearStore = create( bearStoreLogger((set: any) => ({ bears: 0, increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) )

Frontend Undefined

frontendundefined.com › posts › monthly › zustand-review

Why is Zustand a community favorite?

July 26, 2024 - This post contains a detailed review of the Zustand state management library

nuxt.com › docs › getting-started › state-management

State Management · Get Started with Nuxt v4

Nuxt provides powerful state management libraries and the useState composable to create a reactive and SSR-friendly shared state.