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
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
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
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
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.
In this article, we learned about what is 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.
Free money-back guarantee
Unlimited access to all platform courses
100's of practice projects included
ChatGPT Based Instant AI Help (Jarvis)
Structured React.js/Next.js Full-Stack Roadmap To Get A Job
Exclusive community for events, workshops
Sharing is caring
Did you like what Amol Shelke wrote? Thank them for their work by sharing it on social media.
- React useState Hook Typescript
- What is Hooks in React.js & types of Hooks in React.js