The useState hook in React
Hooks got recently introduced in react. Now if you are familiar with React, you will understand the concept of the two main types of components, functional components and class components. One of the main advantages of using Class components over functional components is that only class components can use states. Now what is state? The state object is where you store property values of the component. By calling in the function this.state inside a class component we could render the current state of the object. We could update the state of the object by using this.setState().But there was no way of using states in functional components. Functional components have always been easy to debug, write and test. It was a shame that we could not store variables in a functional component but now that problem has been re-solved with the advent of the useState hook. Hooks made life for developers a lot easier and there is a whole school of things that came with hooks. Its not just useState, but here we will focus on the useState hook.
const [state, setState] = useState(initialState);
This is how a useState hook is initialised. By the rule of convention, useState will always and always have two variables. The first is the value of the current state and you can think of this as this.state and the second is a function through which you can update the state and it is equivalent to this.setState.
The useState accepts the initial value of the state, it can be primitive, boolean, an object or an array.
Let’s see what a boolean value initialisation looks like:
Notice how we always need to import useState from react. This is an essential part of using hooks we would definitely need to import them. Here, both constants expanded and setExpanded have been initialised to false.
Now let’s see how a useState plays out in a real functioning app.
At first look closely at the Checkbox component the isChecked is a built in attribute that takes only a boolean either false or true. Here checking was initialised to false so the checkbox was unchecked.
The checking variable was set false by default by the useState hook. The clickHandler function can update checking to true by the function setChecking(true).
The translation of this piece of code is simple if checking is false then setChecking to true when function clickHandler is triggered by the click of the checkbox. But if checking is true then you can update checking to false by using function setChecking to false when check box of the Checking component is clicked.
Now you do not have to name the second variable setState or setChecking or setExpanded, you can call it anything you want and it will accomplish the task of updating the first element. This first element or variable can be anything it can be primitive, object or an array. We do not need to declare it react hook takes care of it all.
I hope you have a better understanding of the concept of useState now.
Happy Coding!
Samanja
