For questions regarding Zustand, a hook-based state management system for React.
A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.
Questions tagged [zustand]
231 questions
1
vote
1 answer
Listening to object keys in Zustand
In Zustand, how can I listen to changes for a specific object key only?
In this case, I want my useEffect to trigger only if parent.childA is changed, but not if parent.ChildB is changed. I currently get an infinite loop.
Given a state like…
Ben
- 15,938
- 19
- 92
- 138
1
vote
0 answers
Zustand: Out of Memory and large (IndexedDB) state
I have been porting my old app from Redux to Zustand, and it's so much cleaner and nicer now.
However, I am hitting a few problems, and I am wondering what the best way forward is. I am making a podcast application, and the users visit a lot of…
MartinMouritzen
- 221
- 1
- 2
- 12
1
vote
0 answers
How to model app state of a large list of complex objects in Zustand?
Right now I have a customer management app, with app state like:
interface Customer {
name: string,
address: Address,
preferences: Preferences
... 10 more fields ...
}
const customers: Customer[] =…
Rollie
- 4,391
- 3
- 33
- 55
1
vote
0 answers
Typing the `set` method from Zustand store with Immer middleware while keeping autocomplete
I'm having trouble typing the set method from Zustand store while using Immer middleware. I do need to type it since some properties contain functions that will update the state, so they need the set function:
export const useStore =…
Vikms
- 11
- 2
1
vote
0 answers
Zustand in Combination with Suspense breaks Nextjs app
When initiating a store with zustand in a nextjs app and having an (unrelated) suspense block, the app crashes.
Here is a minimal reproduction: https://codesandbox.io/s/holy-shape-br1uqs?file=/pages/index.js
When removing the suspense block,…
Seltsam
- 854
- 1
- 7
- 27
1
vote
1 answer
Zustand: property derived from other properties in the same state
Consider the following zustand store:
const useStore = ((set) => ({
property1: 2,
property2: 3,
property3: 6,
//etc.
}))
Where property 3 is a multiple of both property1 and property2. Is it possible to set it up such that property3…
Ymi
- 609
- 6
- 18
1
vote
1 answer
Question about how to type check with jsdoc in Slice Pattern
First of all, please forgive me for being a translator.
I would like to type check by adding the type as jsdoc to the slice pattern example described in the zustand official document.
The type for create is not exported, so it cannot be used.
How…
svelnoma
- 13
- 4
1
vote
1 answer
1
vote
1 answer
Using Typescript with Zustand's devtools
when I create my store object separately from the hook and do not assign any type to "set", TS is showing me a type error. Is there any specific type I can throw at it or should I leave it as any? Couldn't find anything about it in the…
CzechCoder
- 33
- 5
1
vote
0 answers
Replacing my layout React Context with a Zustand store #1590
I have a context for the layout of my React app that utilizes a hook for finding out the current window size. Here's the gist of it:
export const LayoutContext = createContext({
menuIsOpen: false,
setMenuIsOpen: (isOpen: boolean) => {},
…
Cytronic
- 139
- 8
1
vote
0 answers
Zustand state change does not apply automatically in React frontend
I'm working on a React game using Zustand and TypeScript. I'm using Zustand to persist the theme (i.e. dark and light modes) and it works fine but react does not register my changes automatically and need to refresh the page to see…
monstajoe
- 25
- 5
1
vote
0 answers
How to initialize store value based on another value from the store?
In Zustand, I need to initialize a few values using functions. Some of these initializers need other (initialized) values from the store. This is a simplified example:
type BearState =
{
whiteBears: number;
brownBears: number;
…
sw1337
- 533
- 4
- 16
1
vote
1 answer
Zustand Middleware that modifies state automatically
I have a zustand store and want to create a middleware that automatically stores the current date whenever I call set().
I think this could be done manually like so:
// store
create((set) => ({
counter: 1,
lastModifiedAt: null,
…
hendra
- 2,531
- 5
- 22
- 34
1
vote
0 answers
React Zustand confirm dialog return value
Just got started with Zustand. Trying to implement a confirm dialog. It is working but i can't get the last bit. I am trying to get a return value if the user declined the dialog, however i am lacking the understanding.
This is what i got so…
user3169083
- 83
- 3
- 10
1
vote
0 answers
cleanest way to trigger a function in child component from parent component in react native
I followed a react native tutorial that builds a todo list(and stores todo items with useState) and I wanted to add delete-todo item functionality. I put a delete button(using Icon react native elements) on the navbar(in App(App.js) component's…
JSmambo
- 11
- 3