React useState Hook Tutorial – A Complete Guide

React useState Hook Tutorial - A Complete Guide

In this tutorial, you will see a complete guide about react useState() hook and how to use it in the function component.

In ReactJS, functional components are some of the most-used components. Because the function components require less coding than class-based components, most developers prefer to use them.

In the function components, the two hooks mostly used are useState() and useEffect(). The useState() hook used for decalre the components state and the useEffect() hook used for modify the DOM elements.

So in this tutorial, we will learn about the useState() hook, like how to define a state using useState, and how to set state or change the state.

Let’s get started!

React useState Hook

If we say it in simple words the React useState() Hook allows us to track state (data and properties) in a function component.

You can set the component’s state or change it using the useState hook. You just have to import it from React package and then use it in your function component.

Import useState

To import the useState from react, you have to write down the following line at the top of your component.

Initialize useState

To set the state in the function component, you need to use the useState hook. You have to set the state variable name, and function name by defining the useState (with default value optional).

The useState() hook takes one parameter as a default state and returns the two responses, the one is the current state, and the second is the function name that use to update the state.

You can see in the above code we first import the useState hook from react. Then we declare the function of our favorite car component.

Then we have defined the useState hook. The first value in [ ] brackets is the current state variable name (e.g. car = “mercedes”) and the second value is the function name that we will use to update the car state with another car name.

Note: You can define any name of state variable and function name.

Access State

In the above code, we set the car state with the default value “mercedes”. So let’s now access it where we want. You can access it anywhere in the function and return it.

Let’s see how we can read the state in the function component.

You can also use the arrow function to define the function component.

Update State

To update the state in the function component, you have to use that function name (e.g. setCar) that you have defined while initializing the useState hook.

Note: You cannot update the state directly as changing the value of a variable like a car = “BMW” (cannot do this).

So we will use our updater function to update the car state value. See the following reference.

The useState hook can behold strings, numbers, arrays, objects, and boolean. And we can initialize the multiple states in the functional component and set the value individually.

Let’s see the example of taking an object value for a state and then how we can update the object value using the useState hook.

Set and Update Objects in State

Let’s take an object value in the state as having key pair values in the object. We will set the different details in the state like a model, color, wheel, etc.

Let’s create a new function component “CarDetails”, you can take any name it is just for reference. Then we will declare the above state in that component.

Then we will make the function to update the car details in the state object. We can update the whole object together and we can also update the specific value in the object.

The above code is for updating the value of the object state in the function component. You can use it for reference.

Did you notice that we have used the …state like this? It is used for keeping the old state along with updating the new value of the state.

If we haven’t used this then the new state will override the old state.

For example: setCarDetails({ brand: “Range Rover” }) and it will remove the “color” and “wheel” option values.

Conclusion

So in this tutorial, you learn about react useState() hook and how to import to use it. You also see how we initialized the state and set the default value and update it with the help of the updater function.

If you have any queries please feel free to ask in the comment section, I will respond to you as soon as possible.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.