Using the state hook

Function Components:

Function component in react generally looks like:

Or,

From the examples given above, previously, they are considered as “stateless components.” In this blog, we will learn how to use react states with these components so that we will refer to them as “function components.” 

Introducing a Hook:

A hook is a unique function that lets you get a grip or “hook into” react features. Using hooks, react features can be used directly even without classes. Let’s look into an example; the useState hook allows to add react state of functioning components. 

When should I use hooks?

Consider a situation when you start writing a function component, and you have come a long way. The program is about to be complete, but you realize that you need to add some state to it. For doing so, previously redeclaration of it in class is required. 

But using hooks, you can declare it inside the function component. Let’s catch an example of this; things will be crystal clear then. 

Declaration of state variable:

Generally in class, we use this to initialize any counter. In the example below, we have initialised the counter state to 0, by setting this.state to 0{ count: 0 } in the constructor:

Instead in the function component, there is no this. We can’t assign values to this.state. We can directly refer to the useState hook inside the component and do the needful changes. 

This useState at first declares a “state variable.” Here, in the above code, “counter” is the name of the variable. We can use anything in the name of a variable like “apple” also. Using the counter, some values can be stored in between the function calls. useState does the same work as this.state does in case of a class. If any function exists, the variables disappear but react to preserve the state variables.

Using useState as an argument

The initial state is the only argument to useState hook. Unlike classes, this hook doesn’t need objects. If required, a string or a number can be kept. 

What useState returns?

useState returns two things: the current state and a function that updates it. Correct syntax to write is const [count, setCount] = useState(). In class, the similar operation is performed by this.state.count and this.setState. 

In the example given above, a state variable “count” is declared and initialized to zero. React will maintain all the values between its re-renders and will retain its current value. The most recent value is provided to the function. For updating the current count, call setCount. 

Reading state

For displaying current count in a class, we use this.state.count. Below is the example:

But, in a function, count can be used directly. The below example shows that how in a function, the counter can be used directly.

State update

For updating in a class, call this.setState() and update the counter count state. 

But in a function, we already have setCount and count as variables declared, so we don’t need this:

Short notes

For better understanding, let’s take an example:

Output:

• In the first line, the useState hook is imported from react. This hook lets you keep the local components in the function component. 
• In line 4, a new state variable is declared by calling useState hook. The variable “count” maintains the number of times the button is clicked. The counter is initialized to zero as the only useState argument. Another function is the setCount which returns the changed value of the count variable.
• In line 9, when the button is clicked, setCount is called with a new value. Then react will again re-render the helper function component with the latest count value to it.

Frequently asked questions:

1. What does useState hook do?
   useState hook is a unique function that takes the initial state as an argument and returns the updated entries.
    
2. What are hooks in React JS?
   Hooks are the special kind of functions that allow hook-up or use the react state and function lifecycle features. Hooks cannot work inside classes.
    
3. Is it possible to use a hook inside a hook?
   No, it’s not possible to use a hook inside a hook. Doing so will violate the rule of Hooks which states that no two hooks can be initialized one within another.

Key Takeaways:

In this blog, we have learned about another hook provided by react called useState. It is also known as “state hook.” Using this, we can add local state to react function components. This is the most exciting part, which we learned for the very first time. 

We have also looked towards what exactly hooks are; one of the most interesting things to notice is Hooks names always start with “use.” 

Keeping the theoretical knowledge at our fingertips helps us get about half the work done. To gain complete understanding, practice is a must. To gain complete understanding, visit our page.

~ happy learning

By: Pradipta Choudhury