ReactJS – useState Hook

Page Content:
1.Introduction
2.Syntax
3.Reading State from State Variable:
4.Updating State of Variable
5.Summary

1.Introduction:

useState() is a React hook. Hooks make it possible to use state and mutability inside function components. It basically lets you turn your non-stateful/functional components into one that can have its own state.

What does calling useState do?

1.It declares a “state variable”.
2.This is a way to “preserve” some values between the function calls.
3.useState is a new way to use the exact same capabilities that this.state provides in a class.
4.Normally, variables “disappear” when the function exits but state variables are preserved by React.

2.Syntax:

const [state, setState] = useState(initialstate)

What do we pass to useState as an argument?
The only argument to the useState() Hook is the initial state.

What does useState return?
1.It returns a pair of values: the current state and a function that updates it.
2.const [count, setCount] = useState() is similar to this.state.count and this.setState in a class, except you get them in a pair.

Now that we know what the useState Hook does, our example should make more sense:

State using Class Component:

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

State using Function Component:

function Example() {

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

We declare a state variable called count and set it to 0. To update the current count, we can call setCount.

3.Reading State from State Variable:

When we want to display the current count in a class, we read this.state.count:

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

In a function component, we can use count directly:

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

4.Updating State of Variable:

In a class, we need to call this.setState() to update the count state:

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

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

<button onClick={() => setCount(count + 1)}>
    Increment Count
</button>

Complete Code:

import React, { useState } from 'react';
function Example() {
    const [count, setCount] = useState(0);
   return (
       <div>
        <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
         click me
        </button>
      </div>
    );
 }

What Do Square Brackets Mean?

const [count, setCount] = useState(0);

This JavaScript syntax is called “array destructuring”. It means that we’re making two new variables count and setCount, where count is set to the first value returned by useState, and setCount is the second. It is equivalent to this code:

var countArray = useState(0); // Returns a pair
var count = countArray[0]; // First item in a pair
var setCount = countArray[1]; // Second item in a pair

5.Summary:

When we declare a state variable with useState, it returns a pair — an array with two items. The first item is the current value, and the second is a function that lets us update it.Using [0] and [1] to access them is a bit confusing because they have a specific meaning.This is why we use array destructuring instead.

Leave a Reply Cancel reply