Zustand - Complete Tutorial
Вставка
- Опубліковано 17 гру 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!
Absolutely brilliant tutorial, It's rare that I understand something so organically and easily, props to you brah
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 😎
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
literally started learning Zustandd yesterday. THIS VIDEO IS A GOD SEND!
19 minutes, and I can already use Zustand now. Thank you so much! Very straightforward explanation!
Same. Haha.
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.
Zustand is amazing. So light, simple and powerful.
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! :)
Completely awsome, just learned and already implemented in my job! Thanks a lot!
you are really amazing sir. best react tutorial ever. lots of love from NEPAL
Accurate, to the point. Thanks a lot for sharing.
This vid made me sub to you. Lots of good info on this channel.
Keep it up!
One more excellent learning. Thank you so much.
you are awesome learned a lot from this session it is definitely a premium content
Concise and to the point. Thanks!
Thanks for the tutorial, It was very easy to understand
You are one of the best UA-camr✨
That's awesome!!
Very concise, clear, and well-explained!
Keep up the great work, man!
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
Really concise and easy to follow!!
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.
Amazing Explanation sir!
this gut deserves a million subs
Excellent tutorial, thanks
Great video and great tool. I will give it a try.
oh man idk how to thank you, you just saved me from spending money just to learn zustand .
best zustand video..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.
Great content
Subscribed 🙌
brilliant education work! thanks!
Thanks 👍, nice explanation
on point, I want to make a cart with it tomorrow
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
man , you are really best!
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
Really nice video, but it made me flinch every time you said “Zustand.” :D
Excellent video!
I love Zustand.
Can you make a video about signals?
This was very helpfull, Thanks!
Thanks a lot, mate! 🎉
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!
Great video🎉
Obrigado, me ajudou muito.
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.
Love thisss
Thanks!
Great video
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?
what about something like
const { count, increment } = useStore();
would that still be inefficient?
i have the same question
did you figure this out?
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
Thanks man
Can you also prepare a video for Jotai? It would be very useful since it gains popularity
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.
I want using react react-query data store in zustand. How can i do it?
Very helpful
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?
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 ?
What tool do you use for autocomplete? Is it some kind of AI assistant?
Would be cool if you showed how to install the Zukeeper extension as well.
After refresh state is setting to default value!, for redux we have redux-persist do we have anything like that in zustand
Hi great video, btw may I know what extensions are you using? Thankssss
made a video on it!
Please make video on signals😊
Do you have a tutorial of this without typescript?
Very insightful. now i got a hang of it. please sir how do you get those code suggestions in your ide?
using copilot!
Hey is there a developer tools for zustand like redux dev tools?
for state managment i prefer using preact/signal with contextAPI now, before i used redux toolkit
next jotai tutorial please🥹
It is similar to riverpod in Flutter. 😊
Which extension is on Visual, when you typeing something, you see helper code that you Can write?
github copilot
What is the extension that always suggests you how to complete your code?
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
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
I can see the code suggestion while you code is that an extension ?
github copilot
Yesssss
what is the VS extension that you use to suggest what to type next
github copilot
Saw it twice. Nice Content. What about Jotai
will make a vid
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!
How zustand is this easy, Always felt redux tool kit was too bulky
how about client has a potato internet and it takes more than 1 second to retrive data from API ?
Show a loader
Can we find out how to manage persistence and advanced concepts in real cases, as well as best practice in react?
This was meant to be a beginner tutorial! For persistence it's actually simple, check out the docs for the persist middleware. For best practices, I have 2 at the end that should be great to get you going
@@cosdensolutions Thank you for everything. I'm following you from the Ivory Coast.
Cosden i have a question. Why zustand and not redux toolkit pls can you shed more light?
❤
Video about signals , vs hooks
Me as a german speaker crying everytime he says Zustand wrong.
I don't see the point in using Zustand as opposed to just creating a regular JavaScript class with these functions as members and then providing an instance as context so individual components can access the state and modify it as needed. Then, the instance could be provided as a parameter to an external function to get the same functionality shown in the video.
Yeah it seems you described the whole thing Zustang does😂
@@piscopancer There is one thing, I think. It seems like Zustang allows a component to be dependent only on one singular property instead of the whole state. I guess that could be used if the state is complicated and the unnecessary renderings are causing performance issues.
@@ptolemyhenson6838 oh I see. Honestly, that's a big optimisation work offered by Zustand thought. Makes it reasonable then
Exactly, if wrote a class that does this you effectively Write Zustand, but don’t forget it has a pub sub feature, hooks and a design that fits the react idiom.
That doesn’t work because the attribute updates don’t trigger React updates. The library valtio implements this approach in a way that does hook into React, though.
Next video, React Context API with useReducer
already have one!
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
what extension is this with hints?
It's Copilot
Valtio is just simpler and better, right?
Redux toolkit is awesome as well with RTK query