Learn useState In 15 Minutes - React Hooks Explained

I love react hooks but they are pretty confusing to look at and when you're first learning them they're definitely not obvious so in this small miniseries I'm going to be covering all of the different react hooks you need to know and talking about them in a way that's really easy for you to understand so you can start using hooks immediately and if you want a more in-depth look into react make sure to check out my full react course I'll link down in the description below so in this first video I'm gonna cover you state which is probably the most important react hook let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this one now to get started with this video all I've done is run the command npx create react app just like this and this actually creates all of the boilerplate code you need for a react application and all I've done is strip out pretty much everything that we don't need so all that we're left with is this really simple app component which has a minus button a span in the middle which displays our account and then this plus button right now there's no functionality for this at all and we're going to add in all of the counter functionality that we need by using the use State hook inside of react so all you need to do is run npx create react app and then when that's done you can just come into your app component here and start modifying the code inside of it directly and then just run NPM start and that'll start up the application over here for us so let me just drag over what it started as you can see here and right now I can click plus - nothing actually works yet so to get started with implementing this functionality the first thing we need to do is import the hook we're going to use so with react what we can do is just D structure out here by putting these curly brackets here and we want to import the use state portion which is just a single hook that we're going to be importing from react and now inside of our function here we can use this use state hook but there's a few gotchas related to hooks that you need to understand first and if you already understand how hooks work and you just want to understand the use state hook you can skip ahead to the time stamp that I'll put down in the description or I'll probably show it on the screen for you but essentially I want to explain the gotchas that you need to understand before you can start using hooks and the first most important thing is that you can only use hooks inside of function components you cannot use them in class components so you must be using a function component to use a hook as you can see here we have a app component which is a function component so we can use hooks but if we for example had you know class app extends you know react dot component we could not use the use state hook inside of here because classes already have their own way to do that the same things that hooks do so make sure you're using a function component and the other important thing that you must understand is that every time your component runs so this function runs your hooks must execute in the exact same order that means for example if you have a use state hook here you know you deaf maybe for you state hooks they always must execute in the same order and that may seem like they're obviously always going to execute in the same order but if you put for example a hook inside of an if check that says if this you know for example equals something you know whatever your hook check is you put up your hook inside of this if check now this first hook may run and it may not run so you're actually going to get errors we're saying that you cannot put a hook inside of a if check right here for example what we have and we can actually show this by just if I say if true here and I save this you say I'm gonna get an error that says react hook use state is called conditionally react hooks must be called in the same exact order in every component render so luckily racked is going to catch these errors for you so you just need to know that you cannot put hooks inside of if statements you cannot put them inside of functions you cannot put them inside of loops they cannot be nested in anything they must be at the top level essentially nothing around them no blocks nothing they just at the top level of your function always called in the exact same order and now if we save you're gonna notice we no longer get any errors because these are all called in the exact same order so that's the really important things to know about hooks but for you started using them now that we know that let's talk about the use state hook and how it maybe compares to the class version of State so to use the use state hook all we need to do is just call use state it's just a function and the thing that we passed to use state is going to be what the default state is let's say that our default state is going to be for for example our counter is going to start at 4 and now this use state hook is going to return to us an array of values so we can just say here our array is equal to use state but something important to notice is nobody's going to actually write this out as an array what they're going to do is D structure this in line because you state always returns an array with two values the very first value in this array is going to be your state so for example count this is going to be our current state at every single iteration of our render function here the second thing we're going to return is a function which is going to allow us to update our state so we're just going to call it set count these you can call whatever you want it doesn't really matter you just need to know that the first thing in the array is always the current state and the second thing is the function that allows you to update that current state so we can do now is instead of having 0 here we can just put our count down here and if we save you're gonna see 4 is our count over here now because we have that being rendered by our use state and we're putting a default value of 4 inside of here now the next thing I want to talk about is how you can actually set to count so to do that let's set up a on click here we can say on click this is going to be called decrement count this is going to remove one from our count we're going to call a function decrement count and all we're going to do is call that set count function which allows us to update our state and we're going to pass at our current count minus 1 let's save that and test our minus button and as you can see we can now update our count by decreasing it by 1 and every time we call this set count or essentially our update function it's going to re-render our component with the new value for our count just like would happen with any other set state inside of a class component when you update the state your componentry renders this is the same exact thing with this used state hook but something important to notice is this is actually the incorrect to update a value based on the previous value as you know if you used class components there's a second version of your set function which allows you to pass in a function and this function actually takes in the previous state value so in our case it's gonna be our previous count and we want to do with our previous count is just subtract one so now what we're doing is we're taking our previous count and we're subtracting one from it and if we save you're gonna notice everything works just the same as it did before but the reason that we're doing this is if we just go back here a little ways to our old version where we just did count minus one if we were to call set count two times in a row so we subtract one here and subtract one here now what should happen is we decrease by two every single time we click but you're gonna notice it still only decreases by one and the reason for this is that our count value here is just the value of count when we render our function so we're calling set count of 4 minus 1 which gives us 3 and we're calling the exact same thing set count of 4 minus 1 which is 3 again they're essentially overwriting each other but what happens when we use the function version where we have the previous count we can just do the previous count minus 1 and if we did that two times in a row what happens as our previous count is actually passed into this so the first time it's 4 4 minus 1 is 3 and then when the second one gets called 3 gets passed in and we get 3 minus 1 would give us 2 and now if we check that and click - you now see we're properly subtracting by 2 so anytime you're modifying state where you actually are using the previous value of your state to create the new value you need to make sure you use the function version of setting your state just like if you were setting state inside of a class component this is the exact same thing now let's just delete that second one we obviously only want to decrement by 1 now let's also create our function for incrementing our count so we'll say increment count and this is going to do essentially the exact same thing so we'll just copy this down but instead we're going to add 1 and down here for our plus we'll say on-click is going to be equal to increment count now we can click subtract we can click plus and both of these are working as we would expect now that is the basic functionality of this use state hook but there's actually a lot more complexity in you state that you need to understand especially if you're coming from class components one thing you know about class components is you actually set the state inside of the constructor so this value for here for example would only ever be ran once because it's inside of our constructor but with the function component this value of four gets called every single time we run our function so if this were for example some really complex math maybe we were you know calculating like Fibonacci or something really complex if that were to keep happening over and over again every time we rendered our component it could really slow down the performance of our application that is why you state actually has two ways to pass in the state the first way is you just pass the state like this and it's going to run every time which when it's just a hard-coded value like for that doesn't matter but it also takes a function version and what this does is it runs this function only the very first time your component renders and we can even show that by just putting a console dot log in here that says run the function and we'll just say return four so if we save you can see our default state and everything works as before but if we inspect our page I drag this over so we can view our console you can see run function is only getting run every single time we actually first render the component so you see if we clear this out it doesn't matter how much I change this that run function is not being ran multiple times but if I were to come into here and instead let's just create a simple function we'll call it count initial just like that and we're gonna put the console log run function in here and return four and now we instead call count initial oops count initial to actually get the initial value this is going to run every time our component renders so now you can see if we click plus every time we're getting that run function being ran every single time our componentry renders so that's something really important to notice versus when we had it the old way where if we pass in a function that called account initial instead now that run function is no longer going to be run every time we render our component so the important thing to notice is that if you are doing something where you have to have really complex slow computation for your initial state make sure you use the function version instead so it only ever gets ran one time now another important thing to notice is that you state works a little bit differently than the state and class components when dealing with objects so let's say that we had an object here for example we had of count and we're going to default that before and then we also had maybe a theme color for some reason so we're going to set that to blue let's just show our theme down here we'll say theme and of course we just need to make sure that we D structure these values out so we have our state here and this is just going to be called set state and then we're gonna have our count be equal to state count and we're going to set our theme equal to state dot theme and now if we save you're going to notice we're getting another error because we're trying to call our set count function right here let's just comment these out for now and we can save and you're gonna notice we have our value of 4th and then our blue being printed out here so we have our count as well as our theme so now if we want to actually decrement our count we need to call set state we have our previous States that's being passed in and what we need to do is come in here and actually return our new value which is going to be an object which is just our count which is going to be previous state dot count plus 1 and this is how you would do this in a normal class component we pass up just the parts we want to change and then it would update our count here to be now plus 1 and our theme would be untouched because we didn't modify it here in our decrement count but you're going to notice something interesting when we click - you can see if this is actually a minus sign here let's redraw that so if we click - here you could say our value change down to 3 which is correct but our theme completely disappeared and that's because with use state hook what is happening is whenever we set our state to value it's not merging an object like it would do with set state inside of a class component we're actually just merges this object with our current state it's actually overriding all of our old state so and everything inside of our state is being overridden with whatever we pass out down here so if you do want to use an object what you need to do is you need to just spread out your previous state and then set your new state so here we have our previous state which is just essentially all the values inside of here and then we're updating our account to be minus one now if we click - you can see our count changes but our value for theme actually does not get modified so it's really important to notice that if you do use an object inside of your state that when you update the object you need to make sure you update it with all the old values as well because they don't get merged together automatically and the reason that the automatic merging does not happen is because in general when you're using state inside of a hook like this what you're going to want to do is actually have multiple state hooks so instead of having one state hook here we would have two so this first one is going to be for our account and it's going to be for set count and let's just change our code for decrement which back to what it was before like this so now if I change this and this and save and come down here and just comment out our theme for now you can see we have the exact same code we had before but now if we want to have our theme be added in here we just create a new use state will default this to blue for example call it theme and we'll call this set theme just like that and now if we save you can see we can modify our account successfully and our theme doesn't get modified because we don't have to worry about our state's clashing because we're now using two different hooks to manage our two different types of state and that's actually one of the biggest benefits of the use State hook is that you can have multiple different pieces of state all broken out and it becomes much easier to manage and change which I really really like for example if we wanted to change our theme when we click the plus button we could say set count I'm sorry set theme and what we want to do here is we're just going to change our theme to be red so let's say it's set theme to red when we click the plus button so if we click - it changes when we click + we change our theme to red so that is working all exactly like we wanted to + and - and we're able to break out these different types of state into their own use state hooks which is absolutely crucial and that's all there is to the use state hook if you enjoyed this make sure check out my full react course I'll link down in the description below and also I have a blog article specifically on you state you can check out for more information also linked in the description down below thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 341,492

Rating: 4.9717836 out of 5

Keywords: webdevsimplified, usestate, react usestate, usestate react, react js usestate, usestate hook, react hooks, react usestate hook, usestate tutorial, react tutorial, react js tutorial, reactjs usestate, react js usestate tutorial, use state react js, reactjs use state, js use state, react hooks tutorial, react hooks project, learn react hooks, learn react usestate, react state, react js state, learn react js, learn usestate in 15 minutes, react usestate js, react beginner

Id: O6P86uwfdR0

Length: 15min 45sec (945 seconds)

Published: Tue May 05 2020