clarification on zustand + nextjs
Unanswered
Havana posted this in #help-forum
HavanaOP
Hey, i was about to implement zustand on my nextjs app. I have never used it in nextjs and found this https://zustand.docs.pmnd.rs/guides/nextjs
but now i'm very confused. It's saying we should create a context... But the entire reason why i'm using zustand is to avoid context, otherwise everything rerenders all the time. What am i supposed to do? I need zustand for only one complicated page full of logic and 3d stuff.
I'm also wondering, how does zustand work with persist (local storage access etc.)? Should i do something special?
but now i'm very confused. It's saying we should create a context... But the entire reason why i'm using zustand is to avoid context, otherwise everything rerenders all the time. What am i supposed to do? I need zustand for only one complicated page full of logic and 3d stuff.
I'm also wondering, how does zustand work with persist (local storage access etc.)? Should i do something special?
17 Replies
I am also new to Zustand (mostly use RTK) but the truth is that let say you import a piece of the store, then your component/page only gets re-rendered when that piece of the state changes
not all the time
HavanaOP
yeah that's the advertised benefit of zustand, but context rerenders everything that is subscribed to that context if the value changes
normal zustand doesn't. Zustand should only rerender if that particular piece of the state changes like you said
@Havana yeah that's the advertised benefit of zustand, but context rerenders everything that is subscribed to that context if the value changes
I also read the guide you shared - there is nothing about context and re-rendering all the time
can you point?
HavanaOP
they are using context for some reason, that's all
and as i said i don't want context because it makes everything rerender
i just want normal zustand : (
@Havana and as i said i don't want context because it makes everything rerender
well, as I read more, Zustand internally uses context but it isn't what you think
they say it won't re-render your component
they use an approach called "fine-grained updates" for this
you can try to see what happens - that's the best way to verify
but I BELIEVE it won't re-render
HavanaOP
it doesn't use context, it uses useSyncExternalStorage
https://github.com/pmndrs/zustand/blob/a958de910fb49392d5407eb0a9a776ec959ce8c5/src/react.ts#L31
https://github.com/pmndrs/zustand/blob/a958de910fb49392d5407eb0a9a776ec959ce8c5/src/react.ts#L31
So by default there's no context going on. Context is only introduced by the user if they want to go with what's explained in that doc page