Avoid this React State Mistake | React Previous State Explained

[Music] hello and welcome hi i'm dave and today we're talking about updating state with the previous state in react and something to address right away that you probably saw on the thumbnail is setting the count with count plus one for example when count is our state is not wrong now i've seen that opinion shared on the web more than once and i just wanted to address that right at the top because look at the docs from react.js.org and the very first example under introducing hooks has a counter with set count plus one and if we look up the use state hook in the list i have to scroll down here in this view and there's using the state hook it gives the example again with set count to count plus one this works it's not wrong and i'm running this small react app component here on the left and you can see it's a basic counter and as i click the plus button it increments and as i click the minus button it decrements so everything's working as expected now why might this not be preferred now that is something i might agree with so let's look at using previous state in react and why it's important really it's a tool and you just need to understand when to use the right tool so what we've got is state and state in react is like the current situation the current snapshot or you could say the current status of the component and if we update the state which in this example is the count when i click plus it updates to one that re-renders the entire component because the state has updated so the golden rule is anytime that the state updates the component will re-render and when that happens we get the new value of count here in the component and then i can increase or decrease that value with count plus one or count minus one but there is another way to use previous state so let me show you that instead of just set count we can give it a anonymous function essentially and you often see it with previous like abbreviated like that p r e v or sometimes previous state either way you can make it an arrow function you can put previous previous state inside of more parentheses if you want to not required though and then you can just use the same variable here for previous state and we're updating in the same way so let me go ahead and save this and i'll leave the minus the way it is pull the app back up and here i should still be able to increment the state and that's previous state plus one i'm using a function with the previous state and notice the minus is still working even though we didn't update it so why would one be preferred over the other well to do that let's not put the set count right here in the on click and i'll create a couple of functions above so let's just call this first one add and then we can call the next one subtract and i guess we'll need to call those functions so let's go ahead and do that inside the function or we could actually just not have the anonymous function here and i think we could just say add and we could probably say subtract right here we're not calling them into action okay so now let's define these functions really quick and with add we're going to go ahead and set the state and that's not what i wanted let's get set state or not set state set count since we named it that there we go set count and now i need count plus one and now i'm just going to copy this down with shift alt and the down arrow and now i'll call this subtract and here we'll have count minus one uh that's not what we wanted either there we go too many typos today okay count plus one count minus one add and subtract they're being called in the on click methods down here and let's see if this still works like we want it to everything is still working in the app with our add and subtract once again we're using count plus one count minus one and we don't notice anything wrong if that's all we do but if we attempt to use these more than once in the same function usually especially if you come over from vanilla javascript you would be thinking okay i've added one to the count and now i'm going to add another one to the count and we expect this total for count to be the new total on the next line that is not how react works react update state in batches so the value of count comes in let's say count is zero so this is zero plus one but then on this next line this is also zero plus one so we just end up with one and we can prove that here i guess i needed to save this all right now let's pull the app back up and i'll click the add button and again it just goes up by one even though our line of thinking would be that this would go up by two that's not how it works now of course the subtract is also working because we've only got it in here once but what if we use the previous state the function that we can use here and i'll just abbreviate it with p r e v this time and now we've got previous plus one and so once again let's send the function in here and use it again so we're updating state the state of the count twice in the add function and we're using this anonymous function that takes in the previous state and now we've got previous state plus one let's see what happens when we click the plus button it goes by two now so this works with the line of thinking like we would kind of think from vanilla javascript okay i've updated the state now i want to add to that total so this will give us a running total now it's not often that you would probably update the same state variable set count for example twice in the same function but if you do this would be the way to do it otherwise it probably wouldn't work as expected so let's go ahead and change this one as well and so we'll say previous previous minus one no just previous there we go and now we should be able to copy that down and also subtract two at the same time so now we're down to four down to two and so on so we're going by twos and the previous state function is working as we expect it to and that is why just count plus 1 or count minus 1 might not be appropriate now this doesn't just apply to a counter let's take into consideration something that would be and i'll just create the function here i don't really need to call anything i'll just demonstrate but let's call something like let's say it's update array and let's say we get a new value here so we'll just say new value or new valve that'll work and now inside the array we usually want to create a new array so we'll call this set let's just call it count so we don't get an error as well but now i could create some new state let's just do that really quick so let's say const and we have our values and then we have set values and it will start out as an empty array there we go okay so now we're going to update our values is what i should say here so update values and now inside this function we can just set values and we want to create a new array you don't want to mutate the original state but now we usually just spread values and pass that in and then add the new value as well and that's what you typically see when you would update the state of that's using an array i should say so we're updating the the array values here or the state values not the array directly and we're using set values but we need to create a new array when we do that however we're still using this values variable and so really if you think about it it would respond the same way if we tried to call this twice in a function as well react would still batch the updates and you wouldn't see the new value added to the array twice that's just not how that works so what we would need to do is well let's go ahead and remove this is we could use that same previous state again so you would say previous and then you would create the new array by spreading out the previous value right for some reason i clicked on that there we go and now this is what you would want using the previous state so really that applies the same way it would in a counter now let's also think about an object so let's let's go ahead and still just use this values here and instead we'll use an object and imagine this was an object where we were going to keep track of let's say a i don't think i need to put it in quotes actually here in javascript but we're going to have a first and a last name for example now one mistake that can happen as we update objects in react would be to think it's going to merge the properties like if we updated this and we just passed in last and i'll put my name in here this would have worked when we were using class components and it would merge the object values however this won't work with use state you actually have to pass in the previous values as well so once again we would have values passed in and then let me get rid of this we probably didn't need that to begin with we would be passing in this value here last equals gray i guess i did need that or what am i thinking right here i've got it in the wrong spot there we go i get my thinking aligned it should all work right so we're creating this new object here we need to be passing in all the previous values of the object and then we overwrite the property that we want to update and this has the same principle as well we're still spreading values which is the values state right here so really if we wanted to use the previous value with the same concept let's copy this down once again we should be sending previous over and then let's put parentheses around this so we don't have an error there and once we do that we could spread the previous as well so this is how you click the wrong spot there this is how you use previous state in react and it doesn't just apply to creating a counter you can use it with objects for state you can use it with arrays for state and and really just about any state that you're pulling the previous value in if you're updating the state based on the previous value this is a way to do it i'm not saying though that using values and spreading it out is wrong i'm not even saying using count plus one is wrong that works and there's nothing wrong with it but as long as you understand state and how it works because if you attempt that twice within the same function when react batches the state update you will not get the expected results if you don't pass in the previous value through a function to set state if you're interested in learning more about javascript and other web development languages libraries and frameworks check out my channel where i have playlists for learning javascript react and much more and if this video has helped you out please like and subscribe doing both of those things helps my channel grow so thank you let's write more code together very soon

Channel: Dave Gray

Views: 1,149

Keywords: react previous state explained, react previvous state explained, react, previous state, prevState, currState, setState, previous state explained, react state explained, previous state in react, prevState in React, setState in react, reactjs, react js, update state with previous state, state updates, react state, react js state, reactjs state, react set state, react setstate, useState, use state, react use state, react usestate, prevstate explained, react for beginners, prevstate

Id: yvTGXH7uybA

Length: 13min 22sec (802 seconds)

Published: Fri Oct 08 2021