Zustand - Complete Tutorial
Vložit
- čas přidán 17. 12. 2023
- Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we will learn about Zustand in React. Zustand is a popular state management library for React that makes it really easy to have global state in your React application. Similarly to Redux, Zustand works with the concept of stores, provides you custom hooks to use directly in React components, and also allows you to easily write global state and scale your React applications. This is the last Zustand tutorial you'll ever need to watch!
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?
@@user-qq8ms6dp7e 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.
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.
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'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! 👏🎉
This is what I had anticipated for. Great tutorial as always. Thank you very much!
literally started learning Zustandd yesterday. THIS VIDEO IS A GOD SEND!
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 😎
Great tutorial. Concise, clear, and quick. Just stumbled upon your video when I was thinking about learning exactly this. Thank you!
thanks man!, i really enjoy your videos and shorts.
19 minutes, and I can already use Zustand now. Thank you so much! Very straightforward explanation!
Same. Haha.
I legit starter learning zustand again yesterday lol, thank you!
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! :)
Zustand is amazing. So light, simple and powerful.
Completely awsome, just learned and already implemented in my job! Thanks a lot!
This vid made me sub to you. Lots of good info on this channel.
Keep it up!
Accurate, to the point. Thanks a lot for sharing.
you are really amazing sir. best react tutorial ever. lots of love from NEPAL
That's awesome!!
Very concise, clear, and well-explained!
Keep up the great work, man!
Absolutely brilliant tutorial, It's rare that I understand something so organically and easily, props to you brah
thanks mate, simple and straightforward explanation
you are awesome learned a lot from this session it is definitely a premium content
One more excellent learning. Thank you so much.
Concise and to the point. Thanks!
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
Thanks for the tutorial, It was very easy to understand
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
clear and so helpful! it just what i need.thank you
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.
Really concise and easy to follow!!
Great video and great tool. I will give it a try.
Amazing Explanation sir!
You are one of the best CZcamsr✨
Great content
Subscribed 🙌
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
Excellent tutorial!
brilliant education work! thanks!
Thanks 👍, nice explanation
Excellent tutorial, thanks
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.
Excellent video!
this gut deserves a million subs
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
This was very helpfull, Thanks!
man , you are really best!
Thanks a lot, mate! 🎉
on point, I want to make a cart with it tomorrow
great vid buddy
best zustand video..thanks
Great video🎉
This is really awesome
Really nice video, but it made me flinch every time you said “Zustand.” :D
oh man idk how to thank you, you just saved me from spending money just to learn zustand .
Great video
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.
I love Zustand.
Can you make a video about signals?
thank you very berief and useful
Obrigado, me ajudou muito.
Love thisss
Thanks man
Thanks!
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!
thank you so much
Thank you, great tuts. By the way, what extension that provides a code suggestion?
Very helpful
Good stuff
Hi, can you turn off copilot next time, please? It's very distracting.
I want using react react-query data store in zustand. How can i do it?
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?
Can you also prepare a video for Jotai? It would be very useful since it gains popularity
I have been using zustand for my react-native projects for a month now, its nice, but I have a question, how do we implement encryption in zustand when using persist?
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.
Hi, Is there any best practice for store dependecy, example:- i have two store
1. User store {username, userid}
2. Invoice store {fetchInvoiceByUserId}
to fetch the invoice by user id what i can do, i can take a parameter in fetchInvoiceByUserId function,
Is it the only way, or is there any best practice around it ?
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
what about something like
const { count, increment } = useStore();
would that still be inefficient?
i have the same question
did you figure this out?
After refresh state is setting to default value!, for redux we have redux-persist do we have anything like that in zustand
Please make video on signals😊
What tool do you use for autocomplete? Is it some kind of AI assistant?
Very insightful. now i got a hang of it. please sir how do you get those code suggestions in your ide?
using copilot!
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.
next jotai tutorial please🥹
for state managment i prefer using preact/signal with contextAPI now, before i used redux toolkit
Hi great video, btw may I know what extensions are you using? Thankssss
made a video on it!
Which extension is on Visual, when you typeing something, you see helper code that you Can write?
github copilot
Yesssss
Do you have a tutorial of this without typescript?
Hey is there a developer tools for zustand like redux dev tools?
What is the extension that always suggests you how to complete your code?
github copilot
It is similar to riverpod in Flutter. 😊
I can see the code suggestion while you code is that an extension ?
github copilot
Saw it twice. Nice Content. What about Jotai
will make a vid
what is the VS extension that you use to suggest what to type next
github copilot
❤
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
how about client has a potato internet and it takes more than 1 second to retrive data from API ?
Show a loader
Cosden i have a question. Why zustand and not redux toolkit pls can you shed more light?
what if we have to persist state with localStorage then how to do ?
read docs in zustand web page
thanks@@kogularajk.3560
Will Zustand replaces redux !! Can we create Ecommerce project using Mern With Zustand state managment library
Yeah you can!
I am planning to use Zustand in one of my client's app. The app will be huge in terms of features and modules so I was confused whether should I go with Zustand or should I keep stick with Redux ? Any experience developer please share your experience
they're both great. Redux scales really well and I've used in complex apps. Zustand I haven't so I can't speak for it in that way. I would try to find if there's any specific features you need from one or the other that the other lacks, and use that as direction