Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
What i love the most about this video is that you do one thing at a time and explain it. So many people do 10 things at once leaving viewers confused and frustrated. Its slightly slower than I required but then you maintain a good cadance. You don't spend time over explaining things.
I've watched many videos about Zustand, but only this one has clarified all my doubts. It's the best resource on the topic. Thank you for creating such an awesome and enlightening video! 👏🎉
When I saw the video title, I thought we had to learn React in German now and wondered if that was the new trend or something. Never heard of Zustand before, thanks for the explanation!
You were absolutely right, there is everything I need to learn about Zustand, thanks a lot for great tutorial, and best practices advice. Appreciate it.
Great video.I just want to make something more clear tough, the first practice you mention in the video does also go for redux and the reason why this works is because (old) { } === (new) { } would evaluate as false thus will be treated as state update,but say count is 1 then (old) 1 === (new) 1 would evaluate as true so no updates required
And i was thinking zustand would be complex to implement. Thanks for this educative and easy to follow tutorial. My first tutorial on zustand and its quite clear.
Fantastic Stuff! When I just watched this I didn't get much out of it. When I paused the video for a while and coded along with you ,learned it better !Thanks again as he said " this will be your last place to learn Zustand and additional bonus you can go teach somebody ".
Great tutorial. I watched your Redux video a couple of weeks ago and now this... Since I'm still learning, which one would you recommend ? Would be nice to have a comparison video of pros & cons of them both.
Zustand is simpler and less intimidating. There's less boilerplate code. Redux has been around for longer and is more stable. Both are great tbh and it really depends on more specific use cases in your project that put you towards one or the other!
About the second best practice. Zustand documentation does not recommend creating multiple stores, they recommend creating slices grouped by functionality, and then spread the slices into the main store. I see this inaccuracy in almost all videos and articles on Zustand
This is not true. It is recommended because it is the most popular pattern, BUT there is no benefit to do this other than sticking the whole state under the devTools. Why would you want to include the whole state on a page that only cares about a small slice of it? Performance wise, you'd want seperate stores, I think.
Fantastic video, very easy to follow and understand. I'd love to see a video on Jotai as well. We've been using it a lot at work and have loved it so far. Only problem is that we can't access the Atom states outside of React components, unlike Zustand.
Great video, great explanation. Just a quick note: Would not be more nice to write handler functions and reference instead of arrow functions everywhere because in a real application there should be some testing for functionalities and named functions make this easier. Reading the code is more easier as well.
Thank you for the video ! One recommandation, go through the documentation while coding, it helps to understand how to get used to the doc, because that can more maintanable et useful in my exprience
Watched both redux and zustand. Zustand seems perfect, for what I need. I just need a couple of data points shared across my app and I don't need all the redux bells and whistles for 2 or 3 things.
This looks interesting. Thanks for showing what zustand can do! I'm not a big fan of accessing & manipulation the state from "everywhere" though, since it has spaghetti-code-potential imo.
This is a great video, Derick! I have a doubt, if I may: StrictMode runs every hook twice, right? Why should we use StrictMode, and why/when no to use it? Thanks man, happy holidays!
Strict mode is there to prevent you from making mistakes in hooks and not cleaning up your dependencies. Ideally, it shouldn't affect you as you develop if you use it so I would keep it and see if anything breaks. If it does, then you might have a bug!
@@cosdensolutions Strict mode only re-renders in development (to catch bugs related to state or effects) and works normally in production where you use the build. The build runs normally.
Blud only uses it for personal use, for TH-cam he prefers to type it for viewers to get more connected and it's hectic to disable and enable it for every recording
@@labhamjain3915 dude you're telling disable the plugin is hard? click on extension click on settings icon disable(workspace) thats it, now you dont have to enable it, it will be disables only for the workspace. and copilot suggestions can distract the viewers so much!
I’ve been enjoying your videos, but one thing i can’t figure out is how to combine zustand (or other sate solution) with react query. Or if that’s a good idea. Feels like it is. EG, i have an audio element, which needs central state management because i want to control it from multiple other components. But it also gets its urls for the audio stream from the backend. I’d love to see a video of how or if you use react query with client state!
I'm having trouble making zustand work together with zusty and persist. How to use multiple middlewares together? Like persit, immer together. Also add dev tools to it?
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
What i love the most about this video is that you do one thing at a time and explain it. So many people do 10 things at once leaving viewers confused and frustrated. Its slightly slower than I required but then you maintain a good cadance. You don't spend time over explaining things.
19 minutes, and I can already use Zustand now. Thank you so much! Very straightforward explanation!
Same. Haha.
I've watched many videos about Zustand, but only this one has clarified all my doubts. It's the best resource on the topic. Thank you for creating such an awesome and enlightening video! 👏🎉
Sir, now i should register you to my book as my favorite react teacher. You explain things very clear while keeping the best practices, awesome 😎
When I saw the video title, I thought we had to learn React in German now and wondered if that was the new trend or something. Never heard of Zustand before, thanks for the explanation!
Hahahahaha this killed me 😂
@@cosdensolutions :D
literally started learning Zustandd yesterday. THIS VIDEO IS A GOD SEND!
No extra talk. To the point and very useful.
Man you explanaitions of Redux and Zustand are the Top on youtube in terms of how fast and clear you provide it.. thank you!!!
Zustand is amazing. So light, simple and powerful.
This is what I had anticipated for. Great tutorial as always. Thank you very much!
Very easy to understand Zustand from this video, I've watched like 3-4 tutorials and was still confused as to what is really happening
You were absolutely right, there is everything I need to learn about Zustand, thanks a lot for great tutorial, and best practices advice. Appreciate it.
Wow, I'm amazed. I loved Redux toolkit, but Zustand is smooth. Thank you for the concise, yet useful explanation.
Great video.I just want to make something more clear tough, the first practice you mention in the video does also go for redux and the reason why this works is because (old) { } === (new) { } would evaluate as false thus will be treated as state update,but say count is 1 then (old) 1 === (new) 1 would evaluate as true so no updates required
Thanks for the tutorial, I got immense clarity in using zustand.
And i was thinking zustand would be complex to implement. Thanks for this educative and easy to follow tutorial. My first tutorial on zustand and its quite clear.
This is an amazing tutorial about zustand. Thank you 🎉
Fantastic Stuff! When I just watched this I didn't get much out of it. When I paused the video for a while and coded along with you ,learned it better !Thanks again as he said " this will be your last place to learn Zustand and additional bonus you can go teach somebody ".
That's the way 😁
Great tutorial. I watched your Redux video a couple of weeks ago and now this... Since I'm still learning, which one would you recommend ? Would be nice to have a comparison video of pros & cons of them both.
Redux is like a dinosaur..
Zustand is simpler and less intimidating. There's less boilerplate code. Redux has been around for longer and is more stable. Both are great tbh and it really depends on more specific use cases in your project that put you towards one or the other!
Simple, clear and complete ( except a small detail, the devtools for zustand which can becvery usefull if the app is big).
Thanks a lot!
New subscriber.I love the way you explain every line of code. ❤
great tutorial, i just started to learn about zustand from yesterday and today i am getting more to understand now. thank you! :)
you are really amazing sir. best react tutorial ever. lots of love from NEPAL
About the second best practice. Zustand documentation does not recommend creating multiple stores, they recommend creating slices grouped by functionality, and then spread the slices into the main store. I see this inaccuracy in almost all videos and articles on Zustand
Aha, you're correct. I had my terminology mixed up
hey, could you link this?
@@AllanSerna-j5y Google "Slices pattern Zustand"
@@den9943, yea, it's flux inspired architecture
This is not true. It is recommended because it is the most popular pattern, BUT there is no benefit to do this other than sticking the whole state under the devTools. Why would you want to include the whole state on a page that only cares about a small slice of it? Performance wise, you'd want seperate stores, I think.
Great tutorial. Concise, clear, and quick. Just stumbled upon your video when I was thinking about learning exactly this. Thank you!
LISA you are the best: song, rap, dance, and aura.
oh man idk how to thank you, you just saved me from spending money just to learn zustand .
thanks man!, i really enjoy your videos and shorts.
Great video - really clear explanation of the key concepts and how to apply them - thanks!
You made zustand easy for me. Thank you
Fantastic video, very easy to follow and understand. I'd love to see a video on Jotai as well. We've been using it a lot at work and have loved it so far. Only problem is that we can't access the Atom states outside of React components, unlike Zustand.
Something like this we have been using for Svelte for years.
Good tutorial. Love from 🇮🇳 India.
Thank you very much. Very valuable video. However, as a beginner, I would have preferred JavaScript code instead of TypeScript.
Pro tip: in the react dev tools settings you can stop it logging twice when in strict mode.
Great video, great explanation. Just a quick note: Would not be more nice to write handler functions and reference instead of arrow functions everywhere because in a real application there should be some testing for functionalities and named functions make this easier. Reading the code is more easier as well.
you are awesome learned a lot from this session it is definitely a premium content
Thank you very much for your teaching. Very helpful to me.
Completely awsome, just learned and already implemented in my job! Thanks a lot!
Thank you for the video !
One recommandation,
go through the documentation while coding,
it helps to understand how to get used to the doc,
because that can more maintanable et useful in my exprience
Accurate, to the point. Thanks a lot for sharing.
Perfect explanation! Thank you!
thanks mate, simple and straightforward explanation
I love Zustand.
Can you make a video about signals?
Really nice video, but it made me flinch every time you said “Zustand.” :D
This vid made me sub to you. Lots of good info on this channel.
Keep it up!
That's awesome!!
Very concise, clear, and well-explained!
Keep up the great work, man!
Well explained. Flawlessly. Thank you.
Watched both redux and zustand. Zustand seems perfect, for what I need. I just need a couple of data points shared across my app and I don't need all the redux bells and whistles for 2 or 3 things.
This looks interesting. Thanks for showing what zustand can do! I'm not a big fan of accessing & manipulation the state from "everywhere" though, since it has spaghetti-code-potential imo.
Thank you, great tuts. By the way, what extension that provides a code suggestion?
this gut deserves a million subs
Thanks for the tutorial, It was very easy to understand
Well, a nice video - i understand zustand now, it's almost just like redux tookit. You could mention persist and other things tho ;). Kudos.
Great video Cosden
Concise and to the point. Thanks!
Thank you for the explanation.
Thanks for your time
This is a great video, Derick! I have a doubt, if I may: StrictMode runs every hook twice, right? Why should we use StrictMode, and why/when no to use it? Thanks man, happy holidays!
Strict mode is there to prevent you from making mistakes in hooks and not cleaning up your dependencies. Ideally, it shouldn't affect you as you develop if you use it so I would keep it and see if anything breaks. If it does, then you might have a bug!
@@cosdensolutions Strict mode only re-renders in development (to catch bugs related to state or effects) and works normally in production where you use the build. The build runs normally.
either disable the copilot or use it 😵💫😵💫😵💫
Blud only uses it for personal use, for TH-cam he prefers to type it for viewers to get more connected and it's hectic to disable and enable it for every recording
@@labhamjain3915 dude you're telling disable the plugin is hard?
click on extension
click on settings icon
disable(workspace)
thats it, now you dont have to enable it, it will be disables only for the workspace. and copilot suggestions can distract the viewers so much!
@@labhamjain3915 It's not hectic. It's two clicks away.
You are his translator?
One more excellent learning. Thank you so much.
on point, I want to make a cart with it tomorrow
man , you are really best!
Really concise and easy to follow!!
Absolutely brilliant tutorial, It's rare that I understand something so organically and easily, props to you brah
Very good. Thank you so much.
clear and so helpful! it just what i need.thank you
You are one of the best TH-camr✨
Can you also prepare a video for Jotai? It would be very useful since it gains popularity
Thanks, Really helpful...
Great video and great tool. I will give it a try.
Hi great video, btw may I know what extensions are you using? Thankssss
made a video on it!
Amazing Explanation sir!
perfect, thank you!
Thanks 👍, nice explanation
Very insightful. now i got a hang of it. please sir how do you get those code suggestions in your ide?
using copilot!
next jotai tutorial please🥹
I want using react react-query data store in zustand. How can i do it?
Excellent tutorial!
Would be cool if you showed how to install the Zukeeper extension as well.
How would you go about computed state?
Excellent tutorial, thanks
Saw it twice. Nice Content. What about Jotai
will make a vid
best zustand video..thanks
what about something like
const { count, increment } = useStore();
would that still be inefficient?
i have the same question
did you figure this out?
brilliant education work! thanks!
great thank you so much
Question. Heard that to avoid rerenders it's better to use reselect with Redux. Is it required here aswell?
In here, you just need to select the state you want and that will cover a lot of your re-rendering issues
Great content
Subscribed 🙌
Is there a lovely person who can show a github project using Zustand ? I want to see how to structure an app with Zustand, like should I split stores
I like to do a folder (& @ my job)
store /
- user
- etc
Thanks a lot, mate! 🎉
I’ve been enjoying your videos, but one thing i can’t figure out is how to combine zustand (or other sate solution) with react query. Or if that’s a good idea. Feels like it is. EG, i have an audio element, which needs central state management because i want to control it from multiple other components. But it also gets its urls for the audio stream from the backend. I’d love to see a video of how or if you use react query with client state!
I actually have a video planned on exactly that ☺️
@@cosdensolutions looking forward to it! I have subscribed
hi can you create a tutorial with zustand using crud operation hooks with modal forms that automatically updates the table in the parent component?
great vid buddy
thank you very berief and useful
I'm having trouble making zustand work together with zusty and persist. How to use multiple middlewares together? Like persit, immer together. Also add dev tools to it?
wtf, I just a YT ad. Blocker bros! It's over!
This is really awesome
Excellent video!