The useState Hook is a special function in React that allows us to track state in functional components.

State generally refers to data or properties that need to be tracked in an application. With useState, we can create and update these values easily.

We initialize our state by calling useState() inside the function component.

useState accepts an initial value and returns two items:

• The current state value
• A function to update that state

The useState Hook can be used to keep track of strings, numbers, Booleans, arrays, object and any combination of these!

import React, { useState } from 'react';

function UseStateHook() {
  const [name, setName] = useState("Rajesh");

  const changeState = () => {
    setName("Kumar");
  }

  return (
    <div>
      <h1>{name}</h1>
      <button onClick={changeState}>Update</button>
    </div>
  );
}

export default UseStateHook;

When we update state that holds an object, the entire object is replaced.

To update only one property, use the spread operator (...) and merge it with the previous state.

Spread Operator : The JavaScript spread operator (…) allows us to quickly copy all or part of an existing array or object into another array or object.

We can also manage arrays with useState.

Use the spread operator [...arr] to add or update items.

import USWithArray from './USWithArray.jsx';
export default function App() {
  return (
    <>
      <USWithArray/>
    </>
  );
}

If we update a variable directly, React will not re-render the UI.

Using useState ensures reactivity and UI updates.

import WithoutState from './WithoutState.jsx';
export default function App() {
  return (
    <>
      <WithoutState/>
    </>
  );
}