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
22
votes
1 answer
What are the conceptual differences between Zustand and Recoil performance
I've been looking into Zustand and Recoil -- two state management libraries that are relatively new.
Recoil is heavily advertised as being "very performant" for React apps with deeply-nested structures. However, I don't see how (or how exactly) it…
YSK
- 528
- 4
- 7
17
votes
2 answers
Zustand fetch with API call useEffect best practice
When fetching state from an API with Zustand in a useEffect function what is the best practice for doing that? Right now I am using it very simply:
export interface ModeState{
modes: Mode[];
fetchModes: () => void;
}
export const useModeStore =…
CorayThan
- 17,174
- 28
- 113
- 161
11
votes
5 answers
How to set zustand state in a class component
I am working on a site that has a piece a global state stored in a file using zustand. I need to be able to set that state in a class component. I am able to set the state in a functional component using hooks but I'm wondering if there is a way to…
whoMe
- 227
- 2
- 13
10
votes
2 answers
Mocking zustand store for jest test
hej, maybe someone can help me with this? I try to mock a zustand store with custom values and actions. I'd like to do the mocking within my test file. But I fail miserably.
This is a simplified example of my react app.
component.jsx
import React…
noob
- 192
- 1
- 11
6
votes
8 answers
NextJS Zustand persist state
I have this github repo: https://github.com/salmanfazal01/next-firebase-starter
Basically I am creating a basic boilerplate with NextJS, Firebase and Zustand as a global state manager
I am unable to persist a few states like theme, user, etc in…
Salman Fazal
- 559
- 7
- 22
6
votes
1 answer
How to use zustand to store the result of a query
I want to put the authenticated user in a zustand store. I get the authenticated user using react-query and that causes some problems. I'm not sure why I'm doing this. I want everything related to authentication can be accessed in a hook, so I…
Arman
- 720
- 2
- 7
- 18
6
votes
2 answers
Fetching multiple states with Zustand/React (shorthand syntax)
Are both ways of fetching states from the Zustand store identical in respect of re-renders on state changes?
Method described in the documentation:
const nuts = useStore(state => state.nuts)
const honey = useStore(state =>…
wenzf
- 337
- 6
- 14
5
votes
2 answers
How to create multiple instances of a Zustand store?
I'm making a map in a component and in this component I'm using Zustand to store the state of each component, the problem is that the store instance is the same for all items, how do I create a new instance for each item?
I've already tried to…
Fred Maciel de Oliveira
- 51
- 1
- 2
4
votes
1 answer
How to call Zustand / React hook outside of React component?
I have this Zustand store to store authenticaction information about logged in user.
const authStore = (set: any) => ({
...initialState,
doLogin: async (user: TLoggedInRequest) => {
try {
set(() => ({status: "pending"}))
…
jnemecz
- 3,171
- 8
- 41
- 77
4
votes
1 answer
How to pass a generic interface to zustand create call in TypeScript?
so I have been struggling with finding an answer, as to what is the correct syntax to pass an generic interface to a when calling a function that takes in a generic type.
What I want to do is const data = itemStore(state => state.data)
import {…
Hawk
- 41
- 1
4
votes
0 answers
Zustand: One State Split Into Slices or Multiple Stores?
I'm using Zustand for state management. Currently, I have 20 slices. And I'm afraid the number of slices will triple. What would be the best approach, splitting one really large state into slices or creating multiple stores (and splitting each one…
ellis
- 181
- 10
4
votes
1 answer
React + PIXI + Zustand - Stale state in mouse handlers
I have a pixi canvas with pointer handlers. You can click on a point on a ‘sequence’ and move it.
The mouse handlers had stale state. To fix it I am recreating the handlers whenever the sequence is modified, so that they always have fresh state.…
ohthepain
- 2,004
- 3
- 19
- 30
4
votes
2 answers
react native with zustand persist
I'm trying to implement a simple todo app with react-native and zustand persist, the code without the persist method is working fine, but when I try to introduce persist, I run into errors or I'm not able to correctly implement it, I went through…
dev1ce
- 1,419
- 1
- 19
- 39
4
votes
2 answers
React 18 - Infinite rendering when passing a state variable for lazy loading
With react 17 via lazy loading, i was dynamically loading one of three components according to the selected language (state variable from zustand store).
The import depends on that variable:
const MyComponent = lazy(() =>…
João Raimundo
- 41
- 2
4
votes
1 answer
Testing zustand state changes caused by a component in Jest
I am pretty new to using jest and Im trying to test a component that makes a state change which acts upon my global state (using Zustand). Basically im clicking a button and its adding an item to my state.traits. Here is my component code:
import {…
Ilovebathroomlights
- 345
- 2
- 9