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! 👏🎉
I may have commented this before, but I think you put out among the best tutorials on TH-cam. Concise, clear; you don't rush through and you don't swamp the viewer with too much at a time. Brilliant work, and thanks for this one - I'm going to checkout Zustand now!
Thank you! Great intro to this library. I'm relatively new at React and was struggling to find a clean way to have code outside of the React components mutate state that the components use as part of their rendering. I like how simple zustand is and the attention they gave to separating unrelated values to minimize re-renders.
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.
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 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
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.
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!
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.
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
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!
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.
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 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.
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! 👏🎉
Man you explanaitions of Redux and Zustand are the Top on youtube in terms of how fast and clear you provide it.. thank you!!!
I may have commented this before, but I think you put out among the best tutorials on TH-cam. Concise, clear; you don't rush through and you don't swamp the viewer with too much at a time. Brilliant work, and thanks for this one - I'm going to checkout Zustand now!
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 😎
literally started learning Zustandd yesterday. THIS VIDEO IS A GOD SEND!
This is what I had anticipated for. Great tutorial as always. Thank you very much!
This is awesome!! Statement management is so easy in REACT.js using Zustand!
Thank you! Great intro to this library. I'm relatively new at React and was struggling to find a clean way to have code outside of the React components mutate state that the components use as part of their rendering. I like how simple zustand is and the attention they gave to separating unrelated values to minimize re-renders.
Zustand is amazing. So light, simple and powerful.
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
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.
This is an amazing tutorial about zustand. Thank you 🎉
No extra talk. To the point and very useful.
super helpful and understandable without redundancy, your work is always a solution! thanks a lot!
This is the only tutorial I was looking for.
you are really amazing sir. best react tutorial ever. lots of love from NEPAL
Straight to the point , thank you.
Thanks for the tutorial, I got immense clarity in using zustand.
Wow, I'm amazed. I loved Redux toolkit, but Zustand is smooth. Thank you for the concise, yet useful explanation.
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.
thanks man!, i really enjoy your videos and shorts.
New subscriber.I love the way you explain every line of code. ❤
Great video - really clear explanation of the key concepts and how to apply them - thanks!
great tutorial, i just started to learn about zustand from yesterday and today i am getting more to understand now. 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 😁
Perfect explanation! Thank you!
Great tutorial. Concise, clear, and quick. Just stumbled upon your video when I was thinking about learning exactly this. Thank you!
Accurate, to the point. Thanks a lot for sharing.
Completely awsome, just learned and already implemented in my job! Thanks a lot!
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
Simple, clear and complete ( except a small detail, the devtools for zustand which can becvery usefull if the app is big).
Thanks a lot!
Well explained. Flawlessly. Thank you.
you are awesome learned a lot from this session it is definitely a premium content
That's awesome!!
Very concise, clear, and well-explained!
Keep up the great work, man!
You made zustand easy for me. Thank you
This was easy to understand and straight to the point. Thank you @cosden. I just subscribed 😊
thanks mate, simple and straightforward explanation
this gut deserves a million subs
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.
Concise and to the point. Thanks!
Thank you very much for your teaching. Very helpful to me.
This vid made me sub to you. Lots of good info on this channel.
Keep it up!
Thank you for the explanation.
LISA you are the best: song, rap, dance, and aura.
Thanks for the tutorial, It was very easy to understand
clear and so helpful! it just what i need.thank you
man , you are really best!
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
This guy knows how to teach
Good tutorial. Love from 🇮🇳 India.
One more excellent learning. Thank you so much.
so amazing course! thanks you big
Thanks for your time
Thanks 👍, nice explanation
You are one of the best TH-camr✨
Really concise and easy to follow!!
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!
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.
Absolutely brilliant tutorial, It's rare that I understand something so organically and easily, props to you brah
best zustand video..thanks
oh man idk how to thank you, you just saved me from spending money just to learn zustand .
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
what about something like
const { count, increment } = useStore();
would that still be inefficient?
i have the same question
did you figure this out?
I love Zustand.
Can you make a video about signals?
Great video and great tool. I will give it a try.
Great video Cosden
perfect, thank you!
Excellent tutorial, thanks
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?
@@labhamjain3915 pressing a key combination is hectic?
Very good. Thank you so much.
Thanks, Really helpful...
Thanks a lot, mate! 🎉
brilliant education work! thanks!
Really nice video, but it made me flinch every time you said “Zustand.” :D
Amazing Explanation sir!
Thank You So Much😍
Something like this we have been using for Svelte for years.
Thank you, great tuts. By the way, what extension that provides a code suggestion?
Well, a nice video - i understand zustand now, it's almost just like redux tookit. You could mention persist and other things tho ;). Kudos.
Can you also prepare a video for Jotai? It would be very useful since it gains popularity
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.
Great content
Subscribed 🙌
Excellent tutorial!
on point, I want to make a cart with it tomorrow
great thank you so much
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 was very helpfull, Thanks!
thank you very berief and useful
Is it possible to have several stores and view both in the devtools?
Would be cool if you showed how to install the Zukeeper extension as well.
Pro tip: in the react dev tools settings you can stop it logging twice when in strict mode.
Do you have a tutorial of this without typescript?
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.
This is really awesome
How would you go about computed state?
Very insightful. now i got a hang of it. please sir how do you get those code suggestions in your ide?
using copilot!
Obrigado, me ajudou muito.