React Hooks Tutorial - 3 - useState with previous state

in the previous video we had a look at a basic example on how to implement the u.s. state hook in this video let's take a look at another example this time how to set state based on the previous state value once again we are going to be implementing a counter but this counter will have buttons to increment decrement and reset the count value I'm going to begin by creating a new file in the components folder hook counter to dot j/s within the file I'm going to use the react snippet RFC e to create a functional component next we use the you state hook to create a state variable and the corresponding setter function the count comma set count is equal to you state with a default value of initial count now we can add the GSX count is going to be count itself and then we add the three buttons to reset increment and decrement the count value so for the reset button on click is going to be an arrow function call set count passing an initial count as the argument this will set the count value back to zero next we have the increment button on click call set count and the argument is going to be count plus 1 similarly for decrement on click is going to be set count count minus 1 we can now include the component and app component hook counter to dot J s if you save the files and take a look at the browser we must have the new counter I click on increment and the count increases click on decrement the count decreases and clicking on reset will set it back to zero now you might be wondering what is so special about this example how does it differ from what we have seen in the previous video well here's the thing the current implementation and the way we incremented count value in the previous video both are unsafe although it looks like it is working it is not the right way to change the count value let me show you why with a very unlikely piece of code you would implement I'm going to add another button that increments the count by a value of 5 text is going to be increment 5 then on click let's call a function called increment 5 now let's define this increment 5 is an arrow function and within the body for that I is equal to 0 I less than 5 I plus plus and we call set count incrementing it by 1 every time so rather than incrementing it by a value of five and simply looping it five times and incrementing by one every time if we go back to the browser and test this out click on increment five you can see that the count is still incremented by only one the set count method is reading a stale value of the count state variable to overcome this we need to use the second form of the set count function basically instead of passing in a value of the new state variable we pass in a function that has access to the old state value so set count is going to accept a function that has access to the old count so previous count is going to be the argument and the function body previous count plus one so we pass in a function that has access to the old value and increment that by one now if we go back to the browser and test it out increment five you can see that the value increases by five so anytime you need to update state value based on the previous state value always go with the safer option of passing in a function that will set the new state value let me make the changes for increment and decrement buttons as well to copy this paste it here and here and change plus to minus if you now take a look at the browser you should see the counter still working perfectly fine all right that is the second example when you have to update state based on the previous state value pass in a function to the state setter let me also quickly show you the class component equivalent so if I go back to components and class counter to yes you can see that we have the increment count function we call set state passing in a function the function has access to the previous state which we use to calculate the new state again if you're new to class components don't worry about this now we are not quite done with all the details of you state hook let's take a look at another example in the next video thank you guys for watching feel free to subscribe and make sure to click on the bell icon for notifications

Channel: Codevolution

Views: 271,896

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Hooks, React Hooks Tutorial, ReactJS Hooks, React Tutorial for Beginners, ReactJS Tutorial for Beginners, useState, useState Hook, useState Hook in React, useState with previous state

Id: d0plTCQgsXs

Length: 6min 21sec (381 seconds)

Published: Mon May 20 2019