Zustand - Complete Tutorial

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/code/tree/master/videos/long/zustand-tutorial
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!

[@xanteI]

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

[@cosdensolutions]

Aha, you're correct. I had my terminology mixed up

[@user-qq8ms6dp7e]

hey, could you link this?

[@rodjenihm]

@@user-qq8ms6dp7e Google "Slices pattern Zustand"

[@xanteI]

​@@den9943, yea, it's flux inspired architecture

[@venicebeachsurfer]

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.

[@julienheng3880]

This is what I had anticipated for. Great tutorial as always. Thank you very much!

[@vladislaviy]

Man you explanaitions of Redux and Zustand are the Top on youtube in terms of how fast and clear you provide it.. thank you!!!

[@zebcode]

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.

[@yashpatidar.8506]

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! 👏🎉

[@aryansuvarna4923]

literally started learning Zustandd yesterday. THIS VIDEO IS A GOD SEND!

[@r34ct4]

Absolutely brilliant tutorial, It's rare that I understand something so organically and easily, props to you brah

[@rameezh88]

Great tutorial. Concise, clear, and quick. Just stumbled upon your video when I was thinking about learning exactly this. Thank you!

[@alkadoHs]

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 😎

[@cslearn3044]

I legit starter learning zustand again yesterday lol, thank you!

[@camilo5821]

thanks man!, i really enjoy your videos and shorts.

[@VladyslavDihtiarenko]

19 minutes, and I can already use Zustand now. Thank you so much! Very straightforward explanation!

[@vilmarcabanero2500]

Same. Haha.

[@TannerBarcelos]

Zustand is amazing. So light, simple and powerful.

[@ToumaRenshi]

great tutorial, i just started to learn about zustand from yesterday and today i am getting more to understand now. thank you! :)

[@nickwithaz]

Great video - really clear explanation of the key concepts and how to apply them - thanks!

[@letaciogalvao9908]

Completely awsome, just learned and already implemented in my job! Thanks a lot!

[@freeshorts4423]

you are really amazing sir. best react tutorial ever. lots of love from NEPAL

[@Deepakkumar431]

Accurate, to the point. Thanks a lot for sharing.

[@tomasburian6550]

This vid made me sub to you. Lots of good info on this channel. Keep it up!

[@OmarAmeen-sb8bt]

you are awesome learned a lot from this session it is definitely a premium content

[@gmjitendra]

One more excellent learning. Thank you so much.

[@larrymcfarlane6202]

Concise and to the point. Thanks!

[@TheFatafillo]

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.

[@uncore_]

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

[@giovanio.3581]

Thanks for the tutorial, It was very easy to understand

[@peterng.]

That's awesome!! Very concise, clear, and well-explained! Keep up the great work, man!

[@_ayush_oswal]

Really concise and easy to follow!!

[@evanh.3744]

clear and so helpful! it just what i need.thank you

[@rohitghadage3220]

You are one of the best KZbinr✨

[@nfaical3]

Thanks 👍, nice explanation

[@0ninetyseven97]

this gut deserves a million subs

[@Ksahdia]

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!

[@cosdensolutions]

Hahahahaha this killed me 😂

[@Ksahdia]

@@cosdensolutions :D

[@hanspen5978]

on point, I want to make a cart with it tomorrow

[@omaracelys3217]

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

[@dukeselwood]

Excellent tutorial, thanks

[@zerdnelemo]

Great video and great tool. I will give it a try.

[@user-xu9tb7oe2z]

brilliant education work! thanks!

[@arghyadas4138]

Great content Subscribed 🙌

[@rogeert]

I love Zustand. Can you make a video about signals?

[@Jaracara11]

Excellent video!

[@chrishanthacosta4093]

best zustand video..thanks

[@harag9]

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.

[@mleite1]

Redux is like a dinosaur..

[@cosdensolutions]

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!

[@lucasyang7726]

Great video🎉

[@lutzruhmann7162]

This was very helpfull, Thanks!

[@minusmarigold98]

man , you are really best!

[@gowthamsrinivasan9285]

Great video

[@lekandar4889]

Thanks man

[@Ameer_Ameen]

oh man idk how to thank you, you just saved me from spending money just to learn zustand .

[@flwi]

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.

[@pixyoutube538]

Very helpful

[@felix_nope]

Really nice video, but it made me flinch every time you said “Zustand.” :D

[@fabianopereira1011]

Obrigado, me ajudou muito.

[@mrvfino]

Thanks!

[@fernandosoaresdev]

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!

[@cosdensolutions]

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!

[@chinmayghule8272]

@@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.

[@thatsenoughdixit]

Love thisss

[@joerodrigo9661]

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?

[@yell4460]

Hi great video, btw may I know what extensions are you using? Thankssss

[@cosdensolutions]

made a video on it!

[@kousheralam8657]

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 ?

[@user-qq8ms6dp7e]

what about something like const { count, increment } = useStore(); would that still be inefficient?

[@sep1ol]

i have the same question did you figure this out?

[@Mrkostas7777ify]

Can you also prepare a video for Jotai? It would be very useful since it gains popularity

[@patrickmichael4113]

Very insightful. now i got a hang of it. please sir how do you get those code suggestions in your ide?

[@cosdensolutions]

using copilot!

[@KylanHurt]

Would be cool if you showed how to install the Zukeeper extension as well.

[@Di-yes]

Question. Heard that to avoid rerenders it's better to use reselect with Redux. Is it required here aswell?

[@cosdensolutions]

In here, you just need to select the state you want and that will cover a lot of your re-rendering issues

[@saurabhu6458]

Please make video on signals😊

[@blankvoid4137]

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?

[@milanzmitrovic]

What tool do you use for autocomplete? Is it some kind of AI assistant?

[@tiavinarak7109]

for state managment i prefer using preact/signal with contextAPI now, before i used redux toolkit

[@battulabalakrishna8062]

After refresh state is setting to default value!, for redux we have redux-persist do we have anything like that in zustand

[@camstuart]

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!

[@cosdensolutions]

I actually have a video planned on exactly that ☺️

[@camstuart]

@@cosdensolutions looking forward to it! I have subscribed

[@SKKhandokar]

I want using react react-query data store in zustand. How can i do it?

[@killswitch.]

Yesssss

[@loribryant4999]

Hey is there a developer tools for zustand like redux dev tools?

[@bryandelacruz9066]

Do you have a tutorial of this without typescript?

[@djarma7980]

Which extension is on Visual, when you typeing something, you see helper code that you Can write?

[@cosdensolutions]

github copilot

[@techzone2009]

It is similar to riverpod in Flutter. 😊

[@khizer3528]

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

[@cosdensolutions]

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

[@icoderdev]

❤

[@hacer7097]

What is the extension that always suggests you how to complete your code?

[@cosdensolutions]

github copilot

[@radharaji4153]

I can see the code suggestion while you code is that an extension ?

[@cosdensolutions]

github copilot

[@Tesfamichael.G]

Saw it twice. Nice Content. What about Jotai

[@cosdensolutions]

will make a vid

[@henochangemichaellonzokoff6036]

Can we find out how to manage persistence and advanced concepts in real cases, as well as best practice in react?

[@cosdensolutions]

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

[@henochangemichaellonzokoff6036]

@@cosdensolutions Thank you for everything. I'm following you from the Ivory Coast.

[@rohithn-76]

Will Zustand replaces redux !! Can we create Ecommerce project using Mern With Zustand state managment library

[@cosdensolutions]

Yeah you can!

[@endlessia]

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

[@Iandavidandrino]

I like to do a folder (& @ my job) store / - user - etc

[@ekchills6948]

Cosden i have a question. Why zustand and not redux toolkit pls can you shed more light?

[@davidgibradze9692]

Video about signals , vs hooks

[@bakersentamu4725]

How zustand is this easy, Always felt redux tool kit was too bulky

[@faisal_dev951]

what if we have to persist state with localStorage then how to do ?

[@abrahimzaman360]

read docs in zustand web page

[@faisal_dev951]

thanks@@kogularajk.3560

[@erich2s]

next jotai tutorial please🥹

[@kale_bhai]

Next video, React Context API with useReducer

[@cosdensolutions]

already have one!

[@s_5526]

pls make animation video in react native cli if possible pls make a app with complete fullstack using firebasse

[@ROVAKAN]

how about client has a potato internet and it takes more than 1 second to retrive data from API ?

[@cosdensolutions]

Show a loader

[@CoryTheSimmons]

Valtio is just simpler and better, right?

[@webmobile21]

4:20 are you saying that it is mandatory all custom hook should begin with 'use' word???. What if I do not use "use" word. Are you implying your custom hook would not work. I am asking this because I think it is not mandatory. Maybe it may be convention in react world

[@ptolemyhenson6838]

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.

[@piscopancer]

Yeah it seems you described the whole thing Zustang does😂

[@ptolemyhenson6838]

@@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.

[@piscopancer]

@@ptolemyhenson6838 oh I see. Honestly, that's a big optimisation work offered by Zustand thought. Makes it reasonable then

[@DarrylHebbes]

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.

[@samuelswatson]

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.

[@malczag9928]

what extension is this with hints?

[@user-im3nr6he9m]

It's Copilot

[@_Yolandi]

Me as a german speaker crying everytime he says Zustand wrong.

[@rajatsharma5908]

If zustand works like a global state than why did you pass the variable "count" as props to "OtherComponent"..... can't we just get that from the store instead of passing it as props??

[@cosdensolutions]

Yes you can, but it was just left over from the previous example where we didn't use zustand yet

[@compman73]

Thank you so much for the video, but I think signal is much much easier to use than Zustand

[@cosdensolutions]

they come with their own set of problems tbh :D and completely bypass React's rendering system so I would proceed with caution

[@compman73]

What kind of problems?

[@statuschannel8572]

either disable the copilot or use it 😵‍💫😵‍💫😵‍💫

[@labhamjain3915]

Blud only uses it for personal use, for KZbin he prefers to type it for viewers to get more connected and it's hectic to disable and enable it for every recording

[@statuschannel8572]

@@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!

[@kale_bhai]

Now, create a similar video with Redux Toolkit

[@harag9]

He already had a redux toolkit video. look down the list.