How to use the “useState” hook in React Js?

Share

What is a Hook in React?

Hooks are functions that let you “hook into” React state and lifecycle features from functional components. Hooks don’t work inside class-based components.

Hooks are a new addition to React 16.8. They let you use state and other React features without writing a class.

When would we use a Hook? 

If we write a function component and realize we need to add some state into it, we can use a Hook inside the existing function component. We’re going to do that right now!

We start by importing useState hook from react:

import React, { useState } from 'react';

function Test() {
  // ...
}

While creating a state variable in the class component we use this.state. For example, if we want to create a counter variable with value 0 in the class component:

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

In the functional component, we don’t have this.state instead, we call useState hook directly from function.

import React, { useState } from 'react';

function Test() {
  // Declare a new state variable"counter"
  const [counter, setCounter] = useState(0);
}

Understanding the hook call in the above code:

What does calling useState do?

It creates a state variable counter and preserves its value between the function call. it means we use the exact same capabilities that this.state provide in a class-based component.

An argument to pass into useState hook?

The only argument to pass into useState hook is an initial value. we are passing 0 as an argument and that makes the counter variable’s value to be 0.

What does useState return?

It returns a pair of values: the current state and a function that updates it. counter is a state variable and setCounter is a function that updates the state of counter variable. that’s why it is written as const [counter, setCounter] = useState(0);

We declare a state variable called counter and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current counter, we can call setCounter.

Accessing/Reading the state variable

In a class-based component, we use this.state for reading state variable while in functional components we use variable name directly.

//class component
<button>You clicked {this.state.counter} times</button>

// functional component
<button>You clicked {counter} times</button>

Updating the state variable

Unlike the class-based component, we don’t have this.state in the functional component so we use a function returned by the useState hook to update a state variable.

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


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

compiling all the topics above we get:

import React, { useState } from 'react';
 
   function Test() {
     const [counter, setCounter] = useState(0);
     return (
       <div>
         <button>You clicked {counter} times</button>
         <button onClick={() => setCounter(counter + 1)}>
         Click me
        </button>
      </div>
    );
  };

For more information about react hooks visit: official documentation

Share
Sudeep Mishra

Sudeep Mishra

Healing

%d bloggers like this: