Speaker A
Zustand is an incredibly powerful state management library that I've used to build applications.
Learn how to use Zustand for efficient state management in React apps, replacing context with a simpler, scalable solution.
Key Takeaways
- Zustand provides a simpler, more efficient alternative to React Context for state management.
- Using context can cause unnecessary re-renders and performance issues in large apps.
- Zustand stores live outside React, allowing flexible and scalable state management.
- State updates in Zustand automatically merge, reducing boilerplate code.
- TypeScript integration with Zustand improves type safety and developer experience.
Summary
- Introduction to Zustand as a powerful state management library for React applications.
- Comparison of React Context API and Zustand, highlighting performance issues with context re-renders.
- Step-by-step guide to converting a basic counter app from context to Zustand.
- Explanation of Zustand's create function and how to define a store with state and actions.
- Demonstration of installing Zustand and creating a custom hook for state management.
- Details on how Zustand merges state updates automatically, simplifying state handling.
- Use of TypeScript with Zustand for typing state and actions.
- Benefits of Zustand including better performance and scalability over context.
- Practical example of implementing increment, decrement, and reset functions in Zustand.
- Encouragement to replace context with Zustand for real-world React projects.
Full Transcript — Download SRT & Markdown
Speaker A
From simple counters all the way to completely in-browser card games, all running entirely with Zustand as the state management library.
Speaker A
In this video, I'm going to show you everything you need to know to get started building your first Zustand project, all the way to what it takes to build out full-scale real-world applications.
Speaker A
Welcome back to Web Dev Simplified, my name is Kyle, and my job is to simplify the web for you, and to get started, we have a really basic counter application.
Speaker A
I kind of want to walk through the code though, because there's some important parts about it that you need to understand for this application, we are using context for everything, so we are wrapping our entire application in this counter provider.
Speaker A
If you're not familiar with context, I'll link a full video in the cards and description telling you everything you need to know about context, but you don't really need to understand what it does to understand this video.
Speaker A
Essentially, we're just putting all of our code for incrementing, decrementing, resetting, and keeping track of what our count is inside this context.
Speaker A
This context is then wrapping our entire application, and then we're using a custom hook we called the created use counter.
Speaker A
And all this does is access the information in our context and give us to it.
Speaker A
So you can see here, we have our count inside this count display, that's this top card up here, and then we have our counter controls, that's this bottom card down here.
Speaker A
And here we're getting that increment, decrement, and reset function, and we'll use them to interact with our counter.
Speaker A
Now the key is, I actually have it so that every single time one of our components re-renders, it'll flash on the screen a separate color, and this render number will increment by one.
Speaker A
So you can see when I click this plus icon, both of these flash green, and that render number increments by one.
Speaker A
And you can see, as I click it, every single time that render number is increasing and these are flashing green.
Speaker A
Now, the reason that this is happening is because when you use context inside of React, every single time you access your context through that hook of use context or whatever custom hook you create.
Speaker A
It'll re-render every single component accessing that data, so in our case, when our count changes, our display obviously updates.
Speaker A
But all of our controls down here, which don't have anything to do with our display at all, are also re-rendering.
Speaker A
This can lead to massive performance problems because if you have a context that's wrapped in most of your application, and you use it in lots of different places.
Speaker A
It could cause your entire application to re-render every time even small minute pieces of data change.
Speaker A
Also, context in general just becomes hard to scale as your application grows in size.
Speaker A
And this is where Zustand really comes in.
Speaker A
So what I'm going to do is I'm going to show you how to take this simple application, convert it over to a basic Zustand application.
Speaker A
So we can understand how easy it is to do the comparison between the two.
Speaker A
So to get started, usually you're going to have like a folder called store or something like that.
Speaker A
I'm just going to do it in this state folder we already have.
Speaker A
And I'm just going to create a brand new file called use counter store dot TS, just like that.
Speaker A
And this is because with Zustand, you're essentially creating a custom hook.
Speaker A
That's why we prefix this with use.
Speaker A
Now we need to install the Zustand library.
Speaker A
So let's just make sure we say NPM I Zustand, just like that.
Speaker A
That's going to install that Zustand library for you and give you access to everything that you need inside of it.
Speaker A
Once that's done, we actually have access to a function, which is called create.
Speaker A
And that allows us to create our store.
Speaker A
So we can just call create just like that.
Speaker A
And this create function is a little bit complicated and interesting to work with.
Speaker A
Essentially, it takes in a single parameter, which is set.
Speaker A
And this is part of another function.
Speaker A
So it takes in a function as that parameter.
Speaker A
And then what we need to do is we need to return an object.
Speaker A
Of all the different values we want inside of our store.
Speaker A
So, for example, we may have a count variable that we want.
Speaker A
Which we're going to set to zero by default.
Speaker A
And right now, we've essentially created a store.
Speaker A
We're not even using set.
Speaker A
We're not updating our state.
Speaker A
And this store has one single value, which is our count.
Speaker A
And if we want, we can set that to a variable.
Speaker A
So we'll just say export const use counter store, just like that.
Speaker A
And now we've created a custom hook called this use counter store.
Speaker A
That just stores a count variable in it and nothing else at all.
Speaker A
Now if we go back into our counter context.
Speaker A
And actually, let's go into our counter component here.
Speaker A
We can actually get that information if we want.
Speaker A
So here, I could say use counter store.
Speaker A
Call that function just like that.
Speaker A
And now I get access to all the data that's inside of here.
Speaker A
So if I want to, I can de-structure out our count variable and have access to that from our counter store.
Speaker A
Instead of our default counter that we had up here.
Speaker A
Now you are noticing that I'm getting some errors and stuff.
Speaker A
And that's because this all requires TypeScript if you want to use TypeScript.
Speaker A
So in our case, we're going to take this counter state, which I have right here, copy it over into our basic store.
Speaker A
And we're going to set that as the type.
Speaker A
And to do that, we just come in here with this create function, it's a generic.
Speaker A
And we can just paste in the type just like that.
Speaker A
And now we need to supply those other parameters of increment, decrement, and reset.
Speaker A
Now you notice, this is very similar to creating a context.
Speaker A
You can see when we create a context, we pass it a generic, usually we have to default the value to null.
Speaker A
But the nice thing about Zustand, since it lives entirely outside of React, and you can use it however you want.
Speaker A
You can just define what your default value is right here.
Speaker A
You don't have to worry about setting the default to null.
Speaker A
Then we essentially set all of our different functions, which I'm just going to copy all these functions over.
Speaker A
So we can use them directly as is.
Speaker A
And that's pretty much it.
Speaker A
So essentially, Zustand just replaces context almost one to one.
Speaker A
When you actually want to use it.
Speaker A
So we're going to have those functions.
Speaker A
I want to make them in-line functions.
Speaker A
Just like this.
Speaker A
So let me just get those in-lined.
Speaker A
Make sure I put commas after them.
Speaker A
There we go.
Speaker A
And then instead of calling set count, we're going to call this set function.
Speaker A
And this set function takes in our current state, and then it's going to ask us to return a new value of state.
Speaker A
Just like when you call set state inside of React, it's the exact same way.
Speaker A
So we have our current state, which is this entire object right here.
Speaker A
And we need to return what our new state is.
Speaker A
Normally, if you're doing this inside of React, you would need to spread out your current state.
Speaker A
So you'd spread out your current state just like that.
Speaker A
Make sure I wrap this in parentheses.
Speaker A
So I know it's being returned.
Speaker A
There we go.
Speaker A
And then we could update our count to be our state dot count plus one.
Speaker A
Just like that.
Speaker A
But the nice thing about Zustand is essentially anytime that you're updating your state.
Speaker A
It's going to merge your current state with the new state.
Speaker A
So this whole adding of the state on like this is not actually required.
Speaker A
It automatically does that merging for you.
Speaker A
I essentially now need to do the exact same thing with decrement and reset.
Speaker A
So here we have our state and we're subtracting one, and here we're just setting our state directly to zero.
Speaker A
So we can just change this to set zero.
Speaker A
Again, just like we would work with React.
Speaker A
And actually, I need to make sure this is count of zero.
Speaker A
There we go.
Speaker A
So just like with set state, you can use the function or non-function version.
Speaker A
And essentially, this set function works just like set state, but instead of updating individual variables, we can use it to update our entire state variable at once.
Speaker A
We just have one variable in here, which is all we're currently storing.
Speaker A
So now I have this counter store.
Speaker A
I have all of my default data stored inside of here.
Speaker A
I have my type set up for everything.
Speaker A
Now I can essentially go into my counter here, and anytime I was using that use counter, I can replace it with my new counter store version.
Speaker A
I can get rid of all of my context stuff.
Speaker A
I no longer have any context in my application at all.
Speaker A
And as long as I wrap this in a fragment, everything else should work exactly the same as before.
Speaker A
But now you'll notice we automatically get some nice performance wins in our application.
Speaker A
So now you can see here, when I click the plus button, it's actually still rendering both of them.
Speaker A
As you can see, they're flashing and increasing the render number.
Speaker A
The reason for this is you don't actually get the performance wins of Zustand.
Speaker A
Unless you make sure you only extract out the variables you need when you call the use counter store function.
Speaker A
So if you call this function as is, it returns your entire context object or your entire store.
Speaker A
So it's returning to us count, increment, decrement, and reset every single time.
Speaker A
Now in our case, we're only accessing the count variable here, and we're only accessing the functions here.
Speaker A
So I want to be able to essentially narrow down, only get the data I want.
Speaker A
That way it'll only update when that data changes.
Speaker A
You can do that by passing a function to use counter store.
Speaker A
It'll take your entire state as the value you get for the parameter of the function.
Speaker A
And then we just want to extract whatever we want.
Speaker A
So in our case, we want the count variable.
Speaker A
So now what essentially is going to happen is it's going to extract that count variable out.
Speaker A
And it's only going to re-render this component when this exact state variable changes.
Speaker A
I can do the exact same thing down here too.
Speaker A
So I can say increment is equal to use counter store.
Speaker A
Or counter store, sorry.
Speaker A
Take in our state.
Speaker A
And I want to get our state dot increment function.
Speaker A
Just like that.
Speaker A
Now I'm going to do this for our other functions as well.
Speaker A
Which is decrement and reset.
Speaker A
Just like that.
Speaker A
And then I extract them out using the rest operator or the de-structuring just like this.
Speaker A
This code looks like it works exactly the same.
Speaker A
As you can see, I get my increment, decrement, reset function and so on.
Speaker A
But you'll notice nothing's actually rendering.
Speaker A
And that's because we're technically getting an infinite loop.
Speaker A
And that's because the way that this works is it does a deep equality.
Speaker A
So it checks, is this object exactly the same as the object I got last time?
Speaker A
And since a new object is being created every time this function runs, it's saying this is different.
Speaker A
So let me re-render the component.
Speaker A
Again, then the object is different.
Speaker A
Re-render and so on an infinite number of times.
Speaker A
If you want to be able to get essentially derived data or create like an object of data to return all at once.
Speaker A
You can do this by wrapping your entire function call in a call to the hook called use shallow.
Speaker A
So let's just get that use shallow hook.
Speaker A
Make sure that this gets imported from Zustand.
Speaker A
And then we can wrap our entire function call directly in this hook.
Speaker A
And now everything works exactly the same as before.
Speaker A
You can see it's only re-rendering the bottom or the top section.
Speaker A
The bottom section stays the same.
Speaker A
And the reason that this works is because now it's doing a shallow equality where it checks each key of every single property.
Speaker A
Instead of doing a deep equality where it's only checking to see if the object reference is exactly the same.
Speaker A
Now another huge benefit to using Zustand is that you can actually access your entire state independent of React or any framework that you're using.
Speaker A
All you need to do is just access this use counter store variable anytime you want to access your store.
Speaker A
So in our application, we have this function called increment outside React.
Speaker A
You can see when I click plus one, it's still incrementing my count.
Speaker A
But I'm doing this somewhere outside of my React component.
Speaker A
Where I don't have access to my increment function.
Speaker A
But the nice thing is, I don't need to pass this in anymore.
Speaker A
And that's because I can access my store anywhere I want to.
Speaker A
So, for example, what I can do inside this section for increment outside React.
Speaker A
Is I can make sure it takes in no parameters at all.
Speaker A
And I can access my store, which we called use counter store.
Speaker A
And here I can call get state to get whatever my current state is.
Speaker A
Or I can call set state to set whatever my count state is going to be.
Speaker A
And I can set it to whatever I want.
Speaker A
For example, here I could set my state to a count of 10.
Speaker A
And now when I click this button, it's just automatically going to change my count to 10.
Speaker A
You can see here.
Speaker A
Doesn't matter what my count is.
Speaker A
I click this button, it automatically sets it to 10.
Speaker A
Or I could get my state and I could call that increment function.
Speaker A
Just like this.
Speaker A
And now it's essentially going to work just like the normal plus one button.
Speaker A
They both are going to increment my count by one.
Speaker A
And this is entirely separate from React.
Speaker A
Technically, yes, I'm calling this from a click event listener here, but it's accessing this data without being passed anything from React, which is really nice.
Speaker A
Because now you can access your state variable not only in any component or function you want, but you can even access it outside of your normal React components.
Speaker A
Which is very, very powerful for managing more complex state in larger scale applications.
Speaker A
Now another thing you can do with Zustand for some best practices is how you actually store your actions.
Speaker A
They recommend in the documentation to store your actions inside of your store directly alongside the data that you're storing for those actions.
Speaker A
This is something that you can do if you want to do.
Speaker A
You can see that's how we're doing it here.
Speaker A
And if you do decide to go that route, I highly recommend essentially taking your actions and putting them in a sub-object like this.
Speaker A
So we can take this actions object and put all of our actions inside of here.
Speaker A
This just makes it a little bit easier for us to actually work with our code.
Speaker A
Because now we essentially have this sub-module.
Speaker A
So it's easier to see, okay, here's my state.
Speaker A
And here's all the actions that I can perform on that state.
Speaker A
And you can even break it out into like counter actions.
Speaker A
Just like that.
Speaker A
You can essentially take all of these.
Speaker A
Move those into there.
Speaker A
And then we're just going to merge these two together.
Speaker A
Just like that.
Speaker A
So essentially now I have my actions right here, and here I have my state, which contains my state.
Speaker A
As well as my actions on top of it.
Speaker A
And to do that, actually, I need to put actions with my counter actions.
Speaker A
There we go.
Speaker A
So that's combining those two different things together if you want to go that route.
Speaker A
That's one way that you can do it, and inside of our code, all we would need to do to change that to make it work.
Speaker A
Is first here, call actions dot increment.
Speaker A
And up here when we're trying to get all of our different information, again, just make sure that we're getting that actions object.
Speaker A
So we can come in here and we can get state dot actions.
Speaker A
Just like that.
Speaker A
Give that a quick save.
Speaker A
And now everything works.
Speaker A
And we don't even need to wrap it in a use shallow.
Speaker A
Because this object never changes inside this section.
Speaker A
It's always the same object.
Speaker A
So we don't have to worry about that use shallow context.
Speaker A
Now, I personally like to just keep my actions outside of my store.
Speaker A
And my store is essentially a location just for data.
Speaker A
So what you can do instead is you can essentially create your actions like this.
Speaker A
So I can create an increment action.
Speaker A
That's going to set my store.
Speaker A
So I can say use counter store dot set state.
Speaker A
Take in my state.
Speaker A
And I can essentially set the value here for my count to be my state dot count plus one.
Speaker A
Just like that.
Speaker A
So now I have an increment function.
Speaker A
I can remove that.
Speaker A
And I can paste this down for decrement and reset.
Speaker A
So here we have reset.
Speaker A
Here we have decrement.
Speaker A
This is going to be a minus one.
Speaker A
And for reset, we're just going to set this to zero.
Speaker A
Just like that.
Speaker A
Now again, all these actions I can completely remove.
Speaker A
I can remove all the actions here and here.
Speaker A
And now just the actual state information is what's being stored inside of here.
Speaker A
I don't even need to use this set function at all.
Speaker A
And then anytime I want to increment, decrement, or reset, I could just make sure that I export these.
Speaker A
And now I can use them wherever I want.
Speaker A
So we can come into our code.
Speaker A
And where we're originally getting this data from our actual store, we can now just directly call the increment, decrement, and reset functions.
Speaker A
Just like this.
Speaker A
Same thing here.
Speaker A
I can just say increment.
Speaker A
There we go.
Speaker A
And now you can see, for the most part, everything's working the same.
Speaker A
But reset is broken.
Speaker A
That's because here, I need to set my count to zero.
Speaker A
There we go.
Speaker A
That should actually solve all the problems I have.
Speaker A
So now you can see, I can increment, I can decrement, I can reset, plus one from outside React.
Speaker A
All of that is working exactly the same as before.
Speaker A
And the nice thing is, is now our actions are entirely separate from our state.
Speaker A
And only our actual state stuff is what we get from our store.
Speaker A
Now that's essentially the basics of how you use Zustand, and for 99% of your code, that's all you really need to know.
Speaker A
But there's a few additional things you can do.
Speaker A
For example, you can actually make it so that your entire store is persisted inside of some location.
Speaker A
By default, you can persist to local storage, but you can change that location with custom stuff like the URL or other places.
Speaker A
In our case, we just want to persist to local storage.
Speaker A
So what we can do is we can call the persist function from Zustand.
Speaker A
It's a middleware function.
Speaker A
And all you do is you just pass it your entire normal function that you have right here.
Speaker A
So you just wrap all your normal code inside this persist.
Speaker A
And then as a second parameter to this persist function, we're going to be passing it an object.
Speaker A
You see, there's a bunch of different stuff I can specify on here, like where I want to store things and so on.
Speaker A
But for us, I just want to set a name, and that's going to be the name of where this is stored in local storage.
Speaker A
And let's just say that I want to set this to count.
Speaker A
Just like that.
Speaker A
Now you will notice we are still getting some errors.
Speaker A
Essentially, when you want to use middleware and you're working with TypeScript, what we want to do is we want to make sure we call the create function first.
Speaker A
And then we call essentially the return of that create function with all of our code.
Speaker A
So the only change is, you take your normal code.
Speaker A
And you just call the create function one additional time right before you do all your persist stuff.
Speaker A
Now this data should be stored inside of local storage under a variable called count.
Speaker A
So let's just modify this, we're going to change the variable to eight.
Speaker A
And I refresh my page, and you'll notice it reloads that data of eight.
Speaker A
It persists properly, and everything works without me having to write any complex code to handle this for me.
Speaker A
Another optional thing that I pretty much recommend for every use case of Zustand.
Speaker A
Is that you use Immer or some other type of immutable state management library.
Speaker A
To make managing nested state much easier.
Speaker A
Let's take for example that we have some additional state besides our count.
Speaker A
Let's say that we have a user object.
Speaker A
This user object can have a name property on it.
Speaker A
We also inside this user object want to have an address.
Speaker A
This address may have a street on it.
Speaker A
And let's just say the street is Main Street.
Speaker A
And let's say it's also going to have like a zip code or something like that.
Speaker A
We'll just come in here with a zip code.
Speaker A
There we go.
Speaker A
So now we have this brand new user object.
Speaker A
Let's make sure that we type it out.
Speaker A
With a string.
Speaker A
Address.
Speaker A
That's going to be a string.
Speaker A
Street is a string.
Speaker A
And a zip code, which is a string.
Speaker A
There we go.
Speaker A
That gets rid of all of our type errors.
Speaker A
But updating this user object is kind of a pain.
Speaker A
Let's say that we have a function that's going to be called update street.
Speaker A
Just like that.
Speaker A
And we want to update the street to a brand new value.
Speaker A
Well, what we need to do is first get our counter store.
Speaker A
So we'll say counter store.
Speaker A
And we want to set the state.
Speaker A
We're going to be getting our current state.
Speaker A
And we want to return a brand new state variable.
Speaker A
So we're going to be updating our user object.
Speaker A
And we specifically inside of there want to update the address property.
Speaker A
And we specifically inside of there want to update the street property.
Speaker A
To our new street.
Speaker A
Just like that.
Speaker A
But you notice we're getting an errors.
Speaker A
And that's because when I'm writing my state, you notice that it merges like our count here.
Speaker A
We don't have to define our user or pass in our state.
Speaker A
Because it merges that top level for us.
Speaker A
But anytime you have nested state, you need to merge it manually yourself.
Speaker A
So I need to take all my normal user code and merge that in here.
Speaker A
And here I need to take all of my address code.
Speaker A
And I need to merge that in as well.
Speaker A
When I do that, I now no longer get any errors.
Speaker A
But you can see managing this is incredibly difficult and painful to do, especially as you get more and more nested code.
Speaker A
And when you have large global state, it's very common to have deeply nested state objects.
Speaker A
This is a huge pain to do.
Speaker A
This is where the idea of Immer or similar libraries comes in.
Speaker A
All we need to do is just like we used our persist library, we can wrap our code inside Immer instead.
Speaker A
We don't have to pass along anything additional.
Speaker A
And we just need to make sure the extra function call is there.
Speaker A
And when we do that, we can now use Immer to actually make our state updates much easier to work with.
Speaker A
So in our particular case, let's go down to where we have update street.
Speaker A
And before we actually do anything, we first need to install Immer.
Speaker A
So I can just type in NPM install Immer.
Speaker A
That's going to install the Immer library to use with us.
Speaker A
And all we need to do is instead of manually typing out what our nested state's going to be.
Speaker A
The really nice thing is, is now I can just mutate my state directly.
Speaker A
And Immer will do all the work behind the scenes to stitch everything together.
Speaker A
So I can say S dot user dot address dot street is equal to new street.
Speaker A
And that's going to automatically update my address for the street property only.
Speaker A
And leave everything else exactly the same.
Speaker A
Now another really nice thing is we could do the same thing with our count variables down here.
Speaker A
For example, I could just mutate my count by saying count plus plus.
Speaker A
Which is S dot count.
Speaker A
That'll increment my count.
Speaker A
I can do the exact same thing here.
Speaker A
Where I want to decrement my count.
Speaker A
And then, of course, down here we're already setting it to zero.
Speaker A
And now you can see when I click plus, it's updated my count.
Speaker A
Minus is decrementing my count.
Speaker A
And reset is setting me back to zero.
Speaker A
So you can see that Immer just makes it much easier to directly modify my state variables, especially when dealing with nested state.
Speaker A
Because this one single line is much easier to read and understand.
Speaker A
And that super long nested bit of code that we had before.
Speaker A
Now Zustand and state management in general is amazing.
Speaker A
But sometimes you just don't need it.
Speaker A
In this video right over here, I talk all about why you may not need a state management library and how you can make do with other features instead.
Speaker A
With that said, thank you very much for watching and have a good day.
Topics:ZustandReact state managementReact Context APIperformance optimizationTypeScriptcustom hooksReact tutorialstate management libraryWeb Dev SimplifiedReact
![Wondimagegn chane [kumkumee] ወንድማገኝ ጫኔ |ኩምኩሜ| New Ethio… — Transcript](https://i.ytimg.com/vi/6G1d_D0c0iA/maxresdefault.jpg)
