React useState typeScript complete guide

In this article, we are going to see what is React useState typescript and the complete guide to working with them. Also, we are going to compare hooks with this.state. So be ready to learn something new from this article. If you want to start your career as a programmer and don’t know where to start. Then you can visit Codedamn for amazing tutorials and practice code. Let’s start with our first topic which is what is useState in ReactJS.

What is useState in ReactJS?

useState is a ReactJS hook that is introduced after the update of React 16. Many different types of hooks were introduced after the update but we will see only the React useState hook in this article. Before the introduction of React useState hook whenever we have to use the state variable in our React apps. We have to change our functional components to Class components and then we need to use the this.setState to work with states in ReactJS.

Without the useState hook, we will need to update the state value in a declarative way. This means whenever we want to update the state value we have to use the this.setState method everywhere. This will be okay for small projects but what if we have a big project where multiple users will be visiting so in that case we need a better way to do that. So here comes the useState hooks into play.

But with the useState hook, we can make it easy to use the state values and re-render the components. So let’s see this in practice.

React useState hook in practice

When we work with the useState hooks in ReactJS we can use the state values in functional components. We don’t have to change our components back to class components and use the state objects.

Functional components without the useState hook

Let’s first try to update the value of a certain variable in our App component. and show that value on the UI. Here in the following code example image,

We have a functional component. And in that component, I have created a userClick variable which will increment each time the user will click on the button. But the problem that we are facing when we are doing it like this is that the component is not re-rendering. Because the only thing happening here is the variable's value is updating not the state is changing or updating that’s why the component is not re-rendering. But now that we have the useState hook we can be able to change the value of the state variable or update it.

Functional components with useState a hook

Now that we see how useState the hook comes into play and in which situations we will need to use them. Let’s see how to add them to our component as shown in the code example image below.

In the above code example image, We have now added the React useState hook into our App component. First thing first we need to import the useState from React in our file. After that, we can use the useState in our component. First, we have to give an initial value to the useState hook then it will return us an array with a value and a value setter method. We can use the value wherever in our component and using that setter method we can update the value of the state variable.

And as you can see in the example whenever the state value is updated or changed the component re-renders get the updated value. And we are seeing the updated value on the UI also. So that’s how the useState is work with functional components. I hope you learn something new from this article.

Conclusion

In this article, we learned about what is react useState, React useState in practice, Functional components without useState hooks and Functional components with useState hooks. If you want to learn to code and practice your knowledge then you must look at Codedamn courses. It will surely help you in learning to code.