React Hooks tutorials for beginners-2
Welcome to part-2 of the series. You can find part-1 here. We will look into useState with previous state in this part first.
useState with previous State
The example which we had seen in the previous part was not completely perfect, because we were updating the state without considering the previous state.
We will first create a new component HookCounter2.js inside the components folder. It is similar to what we had done in the previous part, but contains buttons for reset and decrement also.
Also, include the new component in App.js file.
Now, it will work perfectly in localhost.
Now, the real issue will occur if we try to setCount within a for loop. This will occur, as we are working with the current count value. Update the code to include a incrementFive function as below.
Now, when we go to localhost and click on the Increment 5 button, it increments only by 1.
To overcome this, we have to use the second form of setCount function. Here, we pass in a function, which have access to old state value.
Now, if we go back to localhost we can find the Increment 5 working perfectly. Also, the Increment and Decrement are working as earlier.
Now, the class based equivalent of the hook code is below.
useState with Object
Now, we are going to see another way in we are going to use object as a state variable in the useState hook. Create a new file HookCounter3.js inside the components folder.
As in Line 4, we can assign an object to the state variable name. We are then having two text fields, which uses the setName() to change the firstName or the lastName.
Now, let’s show the component in App.js
Now, when we update first name or last name in localhost, the other gets disappeared.
So, there is something happening to the state variable. To visualize that we will add another line to the jsx.
Now, when we go back to the browser and check. As in the below gif, the moment we start typing the first name, the last name property is removed and vice versa.
This happens because useState doesn’t automatically update and merge the object. The is a key difference to setState in class based components. So, we have to handle the manual merge.
So, back in VS Code we will fix it by using spread operators to copy everything in an object and then overwriting the changed properties.
Now, when we type in both the properties are shown.
useState with Array
Now, we will look what will happen if the state variable is an array. Create a new file HookCounter4.js in the components folder.
Here, we are first setting the state variable to an empty array. Inside the return, we are looping through it an displaying it.
Now, we have a button and onClick of it we are running a function addItem. Inside the function, we are calling the setItems where we are using the spread operator. After that adding an object with id equal to items.length and a random value.
Now, back to localhost, if we click on the button a random value is generated and shown.
