Hope you make more vids about Zustand and showcase more complex real world use cases! This library deserves more exposure but their docs are a mess tbh. They’re also considering removing the “create” api in v5 according to a discussion in their GitHub repository
Interesting! Might just do that! Tried Zustand out half a year ago and just came back to it like a week before I made this video. It felt so refreshing and intuitive compared to context. Definitely some more advanced use cases you could do with this, the challenge is wrapping them into an easy to understand/follow video haha
@@joshtriedcoding I would love to see Zustand Crash Course in your channel as well (combinated with react query to fetch data to your store, e.g handle logging/registering a user to an app). Cheers! :)
Using zustand is as complicated as the video shows. The video could just show a get example, but it's just "get().variable". It can't be easier to use than this!
Hi, great video! Could you make a proper video specifically on zustand, best practices, managing auth state, scalable folder structure, hydrating the state etc. It would be really great as there aren't many tutorials on this.
One of the greatest things about zustand is that It can manage state outside react, so If you want for example to store data via a function that is not a inside a component, and then consume it inside another function totally different, you can totally do it, without react yelling at you for trying to use reactive state outside components.
I've been thinking about doing more of this and your video really helps me narrow my thinking on how to implement! Thanks for sharing! Is the thing that tells you the size of your import a vs code extension? That looks super helpful!
Although it is okay to use destructuring when you are retrieving data from the store, you should be wary for when you want your component to re-render. If you destructure you are getting retrieving all the store, meaning if something changed, the component will rerender. If you want a better alternative, use selectors.
Yes, you're right. Destructuring the way shown in the video subscribes to the whole store resulting in re-renders whenever any state in the store changes.
@@kamehameha38you almost always store multiple things in a global store, unlike useState. So if you decide to add a new variable you have to go back to all components and change to selectors... or just live with 2-3x slower rendering and more API requests due to unnecessary re-renders.
I think for most use cases jotai is better than zustand for the simplicity. It just feels like global useState while zustand is good if u have a lot of actions in a store and you want it access the value outside of react
Great video Josh love your content, I have question if you if you use this library or context api on page refresh the value resets. Currently localstorage was a option i found is ther any other workaround it
Wow, your videos are always so helpful! I have a new video request - could you make a video on how to use React-hook-form with TinyMCE (Rich Text Editor) on Submit, along with the other input fields? It would be amazing to see you tackle this topic and help us all level up our skills. Best of luck 🎉!
You just have to either use register() to register the field and then do whatever you want with it or just wrap it in a Controller component as with any other custom form element that cannot just use register() easily out of the box. It's more simple than you think.
with zustand though, if i have a complex component that uses zustand to inject state into deep child components...but i have that complex component rendered more than once on the same page (lets say its a chart with an interactive legend or something), will that work? wont each component behave unexpectedly because they're both deriving state from the same global store?
It all looks nice and fresh, but I would really be careful with the count of libraries I use, dependency grows, maintainability becomes more difficult. Of course its good to know about this library, and small projects can def make use of it.
Hi. Can you do a video with a roadmap for beginners in web dev. What topics, subjects, libraries, tools etc we should learn to become good full stack developers
Have you considered making a video on Legend State? Feels like one of the first real options for fine grained reactivity control in the React ecosystem🤔
It looks really awesome, I am planning to use zustand in my personal projects over context or redux. But I think there won't be any jobs asking for zustand, Most of them would want me to be proficient with redux right?
Redux is veeery widely used, especially in enterprise contexts. If you wanna go job hunting, I'd definitely recommend learning it. For my own projects I never use it anymore though
With Jotai (same creator as Zustand) handlig global state is even simpler. You should try it out and make a video about it. Its gonna blow your mind i promise!
I prefer state setters to live as exported functions where state is and not destructure. Keeps state state and actions. I believe they recommend this in the docs too.
Thank you , but I have a question and sorry if I seem stupid: suppose that in my application after the user logged in , can I use the state management here (talking about the old way with useContext) to save the return of backend call /api/findUserById/${id}, because I have many pages in my nextjs that need the profile picture and other user info , so I am currently calling the findUserById in those all pages , which is dump ? Thank you in advance.
hey josh thanks for this! Im using zustand but not able to persist server (setstate) to server component (getstate), the store doesnt just persist among SERVER components. Do you know what the issue is since we cant directly use hooks to set in server side? I console.log it and it says UNDEFINED.
I think just destructure from useState is not recommend, in their documentation they advise to make a new object with selected properties to prevent unnecessary rerenders
Jotai seems much simpler to use imo. All of these tools work on the client though but I haven't found one that can better handle the server/client boundary issues (hydration) I've had when trying to use thing like user preferences etc. Maybe there is one out there but I haven't found it yet.
zustand's for reducer based state management. Jotai for simple useState like state management. If I were to record this video, I would have done it using jotai
I just spent two days implementing react's context into my app. I figured I need to know why people dislike it so much before passing it off. Safe to say that it got very messy. I can't believe how easy zustand is now lol.
I don't get why context providers are hard. You provide them once, or your team lead does, and that's it. Years of development without touching it again.
doesn't work with nextjs without hacks, because zustand doesn't take in initial state, which ppl don't like when u have the state info but client takes a while to initlize
React context was never meant to be a statement manager. It's simply a means of passing context down to children. For example, say you are implementing the renderCell function in a MUI GridColDef --- you can simply useContext to teleport data or pass context down from a great-great-great-....-ancestor without having to worry how to pass the props through a MUI jungle of relationships
btw Zustand way is better for performance as it will not rerender all components involved ("Everything that consumes a context re-renders everytime that context’s state changes.")
I found it really hard to understand Redux before. Then, I discovered Zustand and tried it in a project; it's so cool and effective compared to Redux. It doesn't require a lot of setup, boilerplate, and other stuff. Once I understood the Zustand flow, I found Redux Toolkit much easier to use.
Redux is like the PHP of state management. It’s ugly, disliked and isn’t the most elegant but it sure as hell gets the job done. Redux deserves more love lol
@@chrisstucker1813 Redux was an important step in the future like 8 years ago. Sure, its still in use but as we move forward much like jquery its usage will slowly dwindle. Hmm, side note jquery still has updates :).
I love zustand, makes state so much nicer. I've practically eliminated context from my apps with this + react query (sure that has a context technically, but I mean, it's just one) Only downside I found for this is, you can't reuse contexts. At least not as far as I'm aware. You can say "from this point onward, use this stuff", so doing anything with forms or individual reusable components still requires standard context if you want to have multiple of them going at the same time. But these tend to be highly specialised, with only a few values passed down, so it's not the end of the world.
Very powerful combo you've got with react query and zustand. Not sure about the caveat you're talking about here, you mean there is a use case where you couldn't rely just on Zustand and needed context along with it?
@@joshtriedcoding Imagine a complex (with deeply nested elements) component that has to be reused across the app with different internal state (I know its a bad example, but imagine a form that rendered in different places in your app but if user fills it in one place, it shouldn't be filled in the other). To create it you could either use prop drilling or context, but can't use Zustand, since its stores act like singletons in an app.
@@MrREALball Interesting. I'm actually dealing with this issue right now, and so far I've just been using useState for those form components and using a setter to update the store with the submitted value. I'm not sure if this is an antipattern or what but it works ok. Would love to hear your response.
@@AtizaJuanita yeah, but imagine your form is nested and you don't want to pass the form state though props. You can't use zustand to provide the react hook form setters. Not in a reusable way at least. You can however provide them with context. You can just useForm, pack the output into context and you're good to go for the entire thing. Implementing this at work is my next personal target, no one ever bothered with form libraries there so some components have 20 use states, when they could be useForm + local context
I knew this video was about zustand just from the title lol
Same lol
same
Seems like you've been watching some previous videos then. Appreciate ya man.
Hahaha ikr it's just too good
Same thoughts lol
Great vid as usual, a next one with a real use case of Zustand could be awsome. A pleasure to have new Josh content every week. ❤
I hope you make more videos about zustand.
You're awesome at this! I'm a fan ❤️
Hope you make more vids about Zustand and showcase more complex real world use cases! This library deserves more exposure but their docs are a mess tbh. They’re also considering removing the “create” api in v5 according to a discussion in their GitHub repository
Interesting! Might just do that! Tried Zustand out half a year ago and just came back to it like a week before I made this video. It felt so refreshing and intuitive compared to context. Definitely some more advanced use cases you could do with this, the challenge is wrapping them into an easy to understand/follow video haha
@@joshtriedcoding I would love to see Zustand Crash Course in your channel as well (combinated with react query to fetch data to your store, e.g handle logging/registering a user to an app). Cheers! :)
Using zustand is as complicated as the video shows. The video could just show a get example, but it's just "get().variable". It can't be easier to use than this!
Man I love your videos. Thank you so much for this.
your content just blow my mind, thanks. U r awesome!
Hi, great video! Could you make a proper video specifically on zustand, best practices, managing auth state, scalable folder structure, hydrating the state etc. It would be really great as there aren't many tutorials on this.
Your explanations are really easy to understand!
Cheers man, that's very nice to hear. Means a lot.
Just waiting for the Ausnahmezustand. Thanks for sharing, will give it a try.
One of the greatest things about zustand is that It can manage state outside react, so If you want for example to store data via a function that is not a inside a component, and then consume it inside another function totally different, you can totally do it, without react yelling at you for trying to use reactive state outside components.
zustand is a godsend lib. it's so elegant and tiny. great interface too. i discovered it earlier this year and it's really enjoyable
This came out just as I was starting to learn Zustand ❤
Zustand + React query === Right way to do State management ❤
Quick but Best Explanation! I like zustand for it's simplicity
I've been thinking about doing more of this and your video really helps me narrow my thinking on how to implement! Thanks for sharing! Is the thing that tells you the size of your import a vs code extension? That looks super helpful!
Thank you for sharing this , can you please make an in depth tutorial on zustand , how to use middlewares in zustand, async state etc
Great one! Helpful!
i subscribed, thankyou for this!
you are making the web easy ! thanks a lot josh
Love your zustand pronaunciation
great solution. I wish next team came up with an easy solution to manage state in their apps
Although it is okay to use destructuring when you are retrieving data from the store, you should be wary for when you want your component to re-render. If you destructure you are getting retrieving all the store, meaning if something changed, the component will rerender.
If you want a better alternative, use selectors.
Show example please
Yes, you're right. Destructuring the way shown in the video subscribes to the whole store resulting in re-renders whenever any state in the store changes.
What if you have only one state in the store? Is there still any benefit of using a selector?
@@franciskintungi
const user = useStore(state => state.user)
const [user, roles] = useStore(state => [state.user, state.roles])
@@kamehameha38you almost always store multiple things in a global store, unlike useState. So if you decide to add a new variable you have to go back to all components and change to selectors... or just live with 2-3x slower rendering and more API requests due to unnecessary re-renders.
I think for most use cases jotai is better than zustand for the simplicity. It just feels like global useState while zustand is good if u have a lot of actions in a store and you want it access the value outside of react
How about recoiljs, should I use which one?
That's backwards
Great video Josh love your content, I have question if you if you use this library or context api on page refresh the value resets. Currently localstorage was a option i found is ther any other workaround it
Good job bro 👍❤
Waiting for this 🎉
Wow, your videos are always so helpful! I have a new video request - could you make a video on how to use React-hook-form with TinyMCE (Rich Text Editor) on Submit, along with the other input fields? It would be amazing to see you tackle this topic and help us all level up our skills. Best of luck 🎉!
Cheers man! Seems like a very specific use case for an issue you might be having? Never tried TinyMCE to be honest, just slate and editorjs
@@joshtriedcoding So then Any Kind of Rich Text Editor with react-hook-form On Submit
You just have to either use register() to register the field and then do whatever you want with it or just wrap it in a Controller component as with any other custom form element that cannot just use register() easily out of the box. It's more simple than you think.
DUDE.
THANKS.
jotai is awesome too, no provider needed also and they are using interesting approach called atom
Zustand and Jotai are my goto state-management Libraries
with zustand though, if i have a complex component that uses zustand to inject state into deep child components...but i have that complex component rendered more than once on the same page (lets say its a chart with an interactive legend or something), will that work? wont each component behave unexpectedly because they're both deriving state from the same global store?
Thank you, Can I use it for getting connected user info from the cookies ??
It all looks nice and fresh, but I would really be careful with the count of libraries I use, dependency grows, maintainability becomes more difficult. Of course its good to know about this library, and small projects can def make use of it.
I love jotai just as much as zustand. It’s from the same devs too.
when new project with zustand ?
Wtf this is so good
What should we consider when accessing state on server?
zustand made state management in simple usestate like hooks, so damn amazing
Thanks a lot, but why i get an error and tell me to change to client component??
❤ Thank you
Welcome champ
Hi. Can you do a video with a roadmap for beginners in web dev. What topics, subjects, libraries, tools etc we should learn to become good full stack developers
Impressive, very nice. Let's see Paul Allen's state management.
have you ever tried Jotai? that seems like another great alterative
Have you considered making a video on Legend State?
Feels like one of the first real options for fine grained reactivity control in the React ecosystem🤔
I havent seen much from zustand by now, but how does it compare to Recoil? It seems kind of similiar.
what kind of extension highlight the name and appear the description?
It looks really awesome, I am planning to use zustand in my personal projects over context or redux.
But I think there won't be any jobs asking for zustand, Most of them would want me to be proficient with redux right?
Redux is veeery widely used, especially in enterprise contexts. If you wanna go job hunting, I'd definitely recommend learning it. For my own projects I never use it anymore though
If i implement zustand like this in a nextjs app, will there be any hydration error?
With Jotai (same creator as Zustand) handlig global state is even simpler. You should try it out and make a video about it. Its gonna blow your mind i promise!
I heard before that destructuring on Zustand like you did in 3:31 is not recommended as it causes rerenders?
Yes, you end up subscribing to the whole store which causes re-renders whenever any state changes in the store.
Yes it's true in their docs they say the same and it makes it less cleaner sad
What’s the difference between type and interface in typescript?
thx
cant wait for the next release of react to literally just be vue
I prefer state setters to live as exported functions where state is and not destructure. Keeps state state and actions. I believe they recommend this in the docs too.
hope you can do a comparison with jotai
Where is that documentations can be found? Any links? 0:20
Thank you , but I have a question and sorry if I seem stupid: suppose that in my application after the user logged in , can I use the state management here (talking about the old way with useContext) to save the return of backend call /api/findUserById/${id}, because I have many pages in my nextjs that need the profile picture and other user info , so I am currently calling the findUserById in those all pages , which is dump ? Thank you in advance.
did you find the answer to this?
Honestly this lib is a game changer and ever since i started using it , i am not leaving it soon
hey josh thanks for this! Im using zustand but not able to persist server (setstate) to server component (getstate), the store doesnt just persist among SERVER components. Do you know what the issue is since we cant directly use hooks to set in server side? I console.log it and it says UNDEFINED.
it does persist in the same server component (root page.tsx) that i persist it in, but in another server component it becomes undefined.
nice
does zustand work with server components or one has to do "use client" ?
I think just destructure from useState is not recommend, in their documentation they advise to make a new object with selected properties to prevent unnecessary rerenders
Josh we would love if you give surrealDB a review
Jotai seems much simpler to use imo. All of these tools work on the client though but I haven't found one that can better handle the server/client boundary issues (hydration) I've had when trying to use thing like user preferences etc. Maybe there is one out there but I haven't found it yet.
Is it make sense to use both jotai and zustand together?
Thanks for sharing this library..
do u think we can use it in place of redux aswell?
Oh yeah for sure. Way more fun to use than redux
Try it and enjoy the simplicity
legendState is king
tsquery has isloading too?
zustand's for reducer based state management. Jotai for simple useState like state management. If I were to record this video, I would have done it using jotai
I love jotai
Zustand is lit for real (3 months of using it ) its so f*ing good
Josh casually teaching thousands of devs how to pronounce 'Zustand'!.;)
Hmm. How about your own version of an e-commerce app?
I never made sense to me to use Redux. But Zustand, YES!
I just spent two days implementing react's context into my app. I figured I need to know why people dislike it so much before passing it off. Safe to say that it got very messy. I can't believe how easy zustand is now lol.
I don't get why context providers are hard. You provide them once, or your team lead does, and that's it. Years of development without touching it again.
Hol' up 1:15 how did you do that?
Any new video?
But we can't use it with next js app dir 😑
Hi Josh! What do you think about jotai as a state manager? Have you been used it?
Going to look into that next and how it compares to zustand / context / redux. Playing around with it will probably be fun
@joshtriedcoding I have tried jotai, and it is so cool! Easy setup and powerful as global state management
hmm, wheres the reducer?
doesn't work with nextjs without hacks, because zustand doesn't take in initial state, which ppl don't like when u have the state info but client takes a while to initlize
React context was never meant to be a statement manager. It's simply a means of passing context down to children. For example, say you are implementing the renderCell function in a MUI GridColDef --- you can simply useContext to teleport data or pass context down from a great-great-great-....-ancestor without having to worry how to pass the props through a MUI jungle of relationships
this is like pinia for vue
Lol... the classic "you don't need X to manage state anymore, use Y" meme
Why don't you provide the context with a setter-function?
It's better than react context api. I really love the name
btw Zustand way is better for performance as it will not rerender all components involved ("Everything that consumes a context re-renders everytime that context’s state changes.")
I didn't know that actually, thanks for sharing man. Very interesting
@@joshtriedcoding you would still need to use shallow from zustand in some cases when you have arrays or objects in a state
I found it really hard to understand Redux before. Then, I discovered Zustand and tried it in a project; it's so cool and effective compared to Redux. It doesn't require a lot of setup, boilerplate, and other stuff. Once I understood the Zustand flow, I found Redux Toolkit much easier to use.
Redux is like the PHP of state management. It’s ugly, disliked and isn’t the most elegant but it sure as hell gets the job done. Redux deserves more love lol
@@chrisstucker1813 Redux was an important step in the future like 8 years ago. Sure, its still in use but as we move forward much like jquery its usage will slowly dwindle. Hmm, side note jquery still has updates :).
@@rmcodes redux toolkit is pretty nice and easy to use. Do you use Zustand?
When i discovered redux i was simply amazed by the devtools
Jotai feels more fun and simple to me.
I think JOTAI did “same” approach
zushtand
Redux is still champion 🏆
I love zustand, makes state so much nicer. I've practically eliminated context from my apps with this + react query (sure that has a context technically, but I mean, it's just one)
Only downside I found for this is, you can't reuse contexts. At least not as far as I'm aware. You can say "from this point onward, use this stuff", so doing anything with forms or individual reusable components still requires standard context if you want to have multiple of them going at the same time. But these tend to be highly specialised, with only a few values passed down, so it's not the end of the world.
Very powerful combo you've got with react query and zustand. Not sure about the caveat you're talking about here, you mean there is a use case where you couldn't rely just on Zustand and needed context along with it?
@@joshtriedcoding Imagine a complex (with deeply nested elements) component that has to be reused across the app with different internal state (I know its a bad example, but imagine a form that rendered in different places in your app but if user fills it in one place, it shouldn't be filled in the other). To create it you could either use prop drilling or context, but can't use Zustand, since its stores act like singletons in an app.
@@MrREALball Interesting. I'm actually dealing with this issue right now, and so far I've just been using useState for those form components and using a setter to update the store with the submitted value. I'm not sure if this is an antipattern or what but it works ok. Would love to hear your response.
I wouldn't manage form states. Use React hook form instead and let it do it's magic
@@AtizaJuanita yeah, but imagine your form is nested and you don't want to pass the form state though props. You can't use zustand to provide the react hook form setters. Not in a reusable way at least. You can however provide them with context. You can just useForm, pack the output into context and you're good to go for the entire thing.
Implementing this at work is my next personal target, no one ever bothered with form libraries there so some components have 20 use states, when they could be useForm + local context
Jotai is better for simple cases, however for complex cases just use zustand
This dude knows German. You can tell from the way he pronounced Zustand 😂
He is german, I think.
zustand is best
Make A Video On How To Use React-hook-form With TinyMCE(Rich Text Editor) on Submit along with the Other input Fields. BEST OF LUCK 🎉
isn't the pronunciation "jaa stand"
Zustand is good, but after using Jotai, it has become a lot simpler to manage states in the app in a clean manner
let's call jotai production ready recoil