ReactJs UseState Hook

Introduction

ReactJs is one of the most popular JavaScript libraries used for building user interfaces. The useState hook is one of the core features provided by ReactJs. It is used to add state to functional components in ReactJs.

Syntax

const [state, setState] = useState(initialState);

• state - the current state value.
• setState - a function that updates the state value.
• initialState - the initial value of the state.

Example

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>
  );
}

Output

Clicking the button will update the value of count and display the number of times the button has been clicked.

Explanation

We can see in the example that we are creating a state variable count and setting it to 0 using the useState hook by calling it with the initial value 0.

We can then call the setCount function to update the state variable, which will re-render the component, updating any UI components that use the state.

The useState hook can be called multiple times in a single component to create multiple state variables.

Use

The useState hook is used to add state to functional components in ReactJs. It is a tool for managing state in a declarative and readable way.

State is used to store data that changes in the course of using an application, such as form data or UI state like whether a menu is open or closed.

Using the useState hook, we can update the state and re-render the component when the state has changed.

Important Points

1. useState should not be used inside loops, conditions or any place where it is evaluated more than once.
2. The state update function returned by useState is guaranteed to be the most recent version of React.
3. useState is only available in functional components, not in class components.

Summary

• The useState hook is used to add state to functional components in ReactJs.
• The syntax of the hook consists of the current state value, a function to update the state and an initial value for the state.
• The useState hook can be used multiple times in a single component to create multiple state variables.
• State is used to store data that changes in the course of using an application.
• Important points to remember while using the useState hook are to not use it inside loops or conditions and that it is only available in functional components.