useState is a React Hook . We call useState inside a function component to add some local state to it. React will preserve this state between re-renders. let us discuss how useState is used

import  { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

there are three things to note here :

1. arguments inside the useState

This is the the initial value of the state variable and this value can be any valid javascript data type like a number, string, array, object. As seen above the counter will have initial value of 0

import { useState } from 'react';

function Example() {
 const [count, setCount] = useState(0);
const [ car , setCar ] = useState("Nexon")
const [ carBrand , setCarBrand ] = useState({ model : "Nexon" , brand : "tata" })
const [numberArray , setNumberArray ] = useState([1,2,3,4])
const [boolean , setBoolean] = useState(true);

All of the above datatypes an be used Now with the help of destructuring we get return values of useState hooks

2. The current state value

This is the current state value of the given hook. Here in the above example count is the state variable every time when the button gets clicked

2. A function that lets you update it.

“setCount” is an async function that helps us to change the value of “state”. setCount updates the state of the count Also the important things to note here are :-

1. But if you have to update setState value consecutively you have to use callback function inside setState and use its parameter value that gives the latest value of the state variable . This happens because setState is async function .

   function App() {
   const [count, setCount] = useState(0);
   function callback() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
   }
   return (
    <div className="App">
      {count}
      <button onClick={callback}>+</button>
    </div>
   );
   }
   

   in the above example count will only update by 1

function Example() {
  const [count , setCount] = useState(0)
  function callback (){
    setCount((value)=>value+1)
    setCount((value)=>value+1)
    setCount((value)=>value+1)


  }
  return (
    <div className="App">
       <h1>{count}</h1>
      <button onClick={callback}>+</button>
    </div>
  );
}

While in this example count will be updated by 3

1. Always update the state value using only the setState function because setState causes the Component to rerender but if you update directly than only the state value will be updated but it will not be visible on DOM as there is no re-render . Hence user cant see the updated state

Hope you liked the blog Comment some bits if I have missed something