useState Hook in react js

In React, state is used to store data that can change over time, such as user input, API responses, or the current state of a component. In class components, state is managed using the this.state object, but in functional components, the useState hook can be used to add state to the component.

In React, useState is a built-in hook that allows you to add state to functional components. Before hooks were introduced in React, state could only be managed in class components. With useState, you can now use state in functional components as well.

The useState hook takes an initial value as its argument and returns an array with two elements:

1. The current state value: This is the current value of the state that was passed as the initial value to the useState hook. It is read-only and can be accessed using the array destructuring syntax [state, setState] = useState(initialState).

2. The state updater function: This is a function that can be called to update the state value. It takes a new value as its argument and re-renders the component with the updated state. The state updater function can be accessed using the array destructuring syntax [state, setState] = useState(initialState).

The useState hook returns an array with two values: the current state value, and a function to update that state value. Here is an example: 

 Example 1:Counter App

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

In this example, we're defining a state variable called count and initializing it to 0 using the useState hook. We're also defining a function called setCount that we can use to update the value of count.

Inside the return statement, we're displaying the current value of count and a button that updates the value of count when clicked.

When the button is clicked, the setCount function is called with a new value for count. React then re-renders the component with the updated value of count.

By using useState, we can easily add state to functional components in React, making it easier to manage the state of our application.

 

Example 2:ON/OFF App

 Here's another example of how to use useState to manage a boolean state value:

import React, { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  function handleClick() {
    setIsOn(!isOn);
  }

  return (
    <button onClick={handleClick}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

In this example, isOn is a boolean state value that is initialized to false using the useState hook. When the user clicks the button, the handleClick function is called, which toggles the value of isOn using the setIsOn function. The component re-renders with the updated state value, causing the button text to change from 'OFF' to 'ON' or vice versa.

Overall, useState is a powerful hook in React that allows you to add state to functional components and manage data that changes over time.