What’s useState hook in React

Hello coders, In this article I’m going to explain the new technology which is using in web designing. As a web developer, this is a must for you if you are using react. Let’s start from the beginning……

Do you ever use the state feature in react?

Don’t worry. Let me show a simple example without using anything special. Sometimes you are familiar with this code. This is for application to increment and decrement the value of a variable called count when clicking the relevant button.

figure I

In this example, I use class base use state to change the value of the count. In this method, we use class base components. Normally we have to use jsx code segments into the render and return.

What’s hook ?

Hooks are the new feature introduced in the React 16.8 version. In react, It allows to use state, effects and other react features without using classes.

Hooks are not the class base component. It is a function base component. When we are using hooks, There are some rules to follow.

Want to read this story later? Save it in Journal.

01)Only call Hooks at the top-level -Do not call Hooks inside loops, conditions, or nested functions.

02)Only call Hooks from React functions -You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components.

When we learning the react hooks, We can learn about useState, useEffect, UseRef, or we can build custom hooks in react components. In this article, I discuss only the useState react hook.

What’s the useState hook?

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.

For your clarification, I get the above example and coded using react useState react hook.

figure II

Let’s compare those couple of code segments one by one. Then you can get more clarification about that to react hook.

Class VS Function

This is an example of, class-based react component which I used in the first code segment(figure I).

class App extends React.Component {
render() {
      return (
         //you can code what would you return
)
}
}

As I say earlier, We use function base components in react hooks. Function base components like this.

function App() {
     return (
           //you can code what would you return
     )
}

Declaring state variable

When we using the state feature in react we have to declare variables to store the state.

In class components, we have to declare the count variable and store 0 by setting this.state to {count:0} in the constructer.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {     
     count: 0    
};  
}

Then we can compare the difference between the function base react hook component and the class base react component. Before we use the useState hook, we should import useState dependency like this.

import React, { useState } from 'react';

function Example() {
       [count, setCount] = useState(0);
}

Why we pass an argument in the useState function

It’s the initial value of the current value of the variable. If we code like this,

[count, setCount] = useState(0);

the initial value is 0,(count=0).

Another example,

[name, setName] = useState("vickey");

it is also the initial value of the name variable.

“vickey” is the initial value of the variable called name.

Why there are two variables as count & setCount

Normally when we call useState function ,it returns pair of values. Therefore we declare 2 variables for store current value(count) and updated value(setCount).

Updating State

In the class-based component, this is the way, how to update the value of the variable(figure I).

count: this.state.count + 1,//it's like count=count + 1

Next there the way, how to update the value in a function-based component using react hook.

As an example,If we want to add 1 to the count. Then the code should be like this(figure II).

setCount(count + 1)

If the initial value of the count is 0, then after that code segment, the value of the count is 1.

Another example,

setName("john")

if the initial value of the name is “vickey”, then after the code segment,the value of the name is “john”.

For perfect and readable purpose coding,I did this updating process through the separate function as increamentHandler and increamentHandler for decrement and increment the value of count variable in my examples.

I think you have a better understanding about what is discussed.

What we discussed.

→ Coded the simple familer example without using any special technologies.

→develop that same code using react useState hook

→Comparism

1)Class vs Function in React

2)Declare the state variable for the both figures

3)Initalizing variables using useState

4)Update variables in react using hooks

In my next blog,I will teach about another react hook called “useEffect”.Keep in touch with my blogs.Happy cording……!!!!!

📝 Save this story in Journal.