React Hooks tutorials for beginners-2

Image for post
Image for post
React Hooks

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.

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.

Image for post
Image for post
HookCounter2.js

Also, include the new component in App.js file.

Image for post
Image for post
App.js

Now, it will work perfectly in localhost.

Image for post
Image for post
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.

Image for post
Image for post
incrementFive

Now, when we go to localhost and click on the Increment 5 button, it increments only by 1.

Image for post
Image for post
increment5

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.

Image for post
Image for post
prevCount

Now, if we go back to localhost we can find the Increment 5 working perfectly. Also, the Increment and Decrement are working as earlier.

Image for post
Image for post
Increment 5

Now, the class based equivalent of the hook code is below.

Image for post
Image for post
ClassCounter2.js

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.

Image for post
Image for post
HookCounter3.js

Now, let’s show the component in App.js

Image for post
Image for post
App.js

Now, when we update first name or last name in localhost, the other gets disappeared.

Image for post
Image for post
The Issue

So, there is something happening to the state variable. To visualize that we will add another line to the jsx.

Image for post
Image for post
Checking

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.

Image for post
Image for post
Real problem

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.

Image for post
Image for post
Issue fixed

Now, when we type in both the properties are shown.

Image for post
Image for post
Both properties

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.

Image for post
Image for post
HookCounter4.js

Now, back to localhost, if we click on the button a random value is generated and shown.

Image for post
Image for post
Random value

This completes part-2 of the series. You can find part-3 here.

You can find the code for the same in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store