React useState Hook

In this part, we will see the first and most important hook, which is React useState hook. useState hook is pretty straight forward where we have 2 arguments, one for current state and second one for update state. current state has current value which we have provided n useState() function as an argument, and if we want to change the value of the current state then we will use update state.

useState Hook

The useState() is same as this.state() in class component as before we have used. useState() let you enable the state() method in functions or functional components. Basically, with the help of useState() method, we can change, update or manipulate the values without refreshing the project.

Syntax

const [initial_state,updated_state] = useState(some_starting_value);

This is the syntax of useState method, as you can see we have passed 2 values in square brackets []. First one will be initial state, and second will be updated state. we have here in useState give some value which will be initial state value by default, In this method we will change the initial_state value using updated_state.

Declaring a State Variable

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

In class component we used to call the state like this, where we had to call constructor and super as well. Also, if we need to access the state, then we have to use this keyword.

import React, { useState } from 'react';

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

In case of useState hook, we just need to import useState from react, we can’t read or assign this.state here instead we can directly use the useState hook. Here, count is current state and setCount is updated state, by default count’s value will be 0 since we gave 0 as an argument of useState(). Also, setCount don’t have any value because we didn’t use it to assign new value.

Reading State

<p>You clicked {this.state.count} times</p>

In class component, we can display the state using this.state in curly braces. But in functional component we can use count directly since we have useState here.

<p>You clicked {count} times</p>

Updating State

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

To update state in class, then we have to use this type of syntax, As you can see we have used this with setState and to access the count variable we have to write this.state.count.

<button onClick={() => setCount(count + 1)}>
    Click me
  </button>

To update state in a functional component, we can directly use setCount and count directly.

How does React Handles Multiple States?

There is a question raised that what if we use multiple useState hooks, then how react handle them so efficiently? So the answer is, React keeps the track of rendering components.

React has a list of internal memory cells which associates with each component. These cells are just a JavaScript objects who can hold some data. When we call a hook, then it reads the current cell and then moves to the next cell, this is how multiple state calls get its independent local state.

Example

import React from 'react';
import { useState } from 'react';

function App(){
  const [before,after] = useState(0);
  const updateMe = ()=> after(before+1);

  return <div><h1>This page is clicked {before}</h1>
              <button onClick={updateMe}> click me</button>
  </div>
}
export default App;

Firstly, we have imported useState hook from react to use it. then we have taken constant in square brackets as you can see we have passed two values parameter before and after. In useState we have given a default value 0 which will be the value of before parameter by default. Now we have one header in this we will fetch value of before parameter. Also, we have a button here which have an onClick event listener with updateMe function.

In updateMe function, we will have to increase the value of before using after parameter.

Output

On screen render:

After 3 clicks: