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!
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
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.
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.
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!
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 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.
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🤔
The original statement is misleading. The example might not show it but you can absolutely modify the state from any of the descendant components under the context provider. You just include the state modifier as part of an object in the provider’s ’value’ property. After that, destructure the object in any descendant component and you have access to it. And the best things is, you only have to destructure the properties you need. It really doesn’t get any easier than that and it’s much easier than having to learn a whole new API since most of the operations you’ll be performing are written in plain JavaScript/TypeScript.
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
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.
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 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
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
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.
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
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 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
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
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.
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?
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 :).
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.
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.")
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
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.
![โอ้เธอช่าง... - บี้เดอะสกา ft. ต๋อง เทวัญ (Prod. by ป๋าเพชร) [Official MV]](http://i.ytimg.com/vi/zbWhiLFmVL0/mqdefault.jpg)
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
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!
Zustand + React query === Right way to do State management ❤
Your explanations are really easy to understand!
Cheers man, that's very nice to hear. Means a lot.
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. ❤
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
your content just blow my mind, thanks. U r awesome!
I hope you make more videos about zustand.
You're awesome at this! I'm a fan ❤️
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.
Man I love your videos. Thank you so much for this.
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
DUDE.
THANKS.
Just waiting for the Ausnahmezustand. Thanks for sharing, will give it a try.
jotai is awesome too, no provider needed also and they are using interesting approach called atom
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.
Quick but Best Explanation! I like zustand for it's simplicity
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.
I love jotai just as much as zustand. It’s from the same devs too.
This came out just as I was starting to learn Zustand ❤
Love your zustand pronaunciation
you are making the web easy ! thanks a lot josh
great solution. I wish next team came up with an easy solution to manage state in their apps
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!
i subscribed, thankyou for this!
Zustand and Jotai are my goto state-management Libraries
Great one! Helpful!
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!
Thank you for sharing this , can you please make an in depth tutorial on zustand , how to use middlewares in zustand, async state etc
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.
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🤔
Honestly this lib is a game changer and ever since i started using it , i am not leaving it soon
The original statement is misleading. The example might not show it but you can absolutely modify the state from any of the descendant components under the context provider. You just include the state modifier as part of an object in the provider’s ’value’ property. After that, destructure the object in any descendant component and you have access to it. And the best things is, you only have to destructure the properties you need. It really doesn’t get any easier than that and it’s much easier than having to learn a whole new API since most of the operations you’ll be performing are written in plain JavaScript/TypeScript.
zustand made state management in simple usestate like hooks, so damn amazing
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
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.
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.
Impressive, very nice. Let's see Paul Allen's state management.
Good job bro 👍❤
when new project with zustand ?
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
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
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
Waiting for this 🎉
Josh casually teaching thousands of devs how to pronounce 'Zustand'!.;)
Wtf this is so good
have you ever tried Jotai? that seems like another great alterative
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.
cant wait for the next release of react to literally just be vue
Zustand is lit for real (3 months of using it ) its so f*ing good
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
❤ Thank you
Welcome champ
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
Thank you, Can I use it for getting connected user info from the cookies ??
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 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
I never made sense to me to use Redux. But Zustand, YES!
I havent seen much from zustand by now, but how does it compare to Recoil? It seems kind of similiar.
Josh we would love if you give surrealDB a review
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
It's better than react context api. I really love the name
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?
Thanks a lot, but why i get an error and tell me to change to client component??
OMG THANK YOU FOR SAVING ME
Where is that documentations can be found? Any links? 0:20
What should we consider when accessing state on server?
Hmm. How about your own version of an e-commerce app?
legendState is king
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?
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 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.
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
hope you can do a comparison with jotai
tsquery has isloading too?
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
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
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.
what kind of extension highlight the name and appear the description?
What’s the difference between type and interface in typescript?
This dude knows German. You can tell from the way he pronounced Zustand 😂
He is german, I think.
does zustand work with server components or one has to do "use client" ?
If i implement zustand like this in a nextjs app, will there be any hydration error?
I love jotai
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 🎉
Jotai is better for simple cases, however for complex cases just use zustand
Hol' up 1:15 how did you do that?
Why don't you provide the context with a setter-function?
Redux is still champion 🏆
Jotai feels more fun and simple to me.
thx
zustand is best
Lol... the classic "you don't need X to manage state anymore, use Y" meme
Is it make sense to use both jotai and zustand together?
nice
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
hmm, wheres the reducer?
Any new video?
But we can't use it with next js app dir 😑
this is like pinia for vue
I think JOTAI did “same” approach