React useState Hook

In React, state is a way to store and manage dynamic data in your components. The useState hook allows functional components to have state, making them powerful and interactive without needing class components.

What is useState?

The useState hook is a built-in React Hook that lets you:

Declare state variables in functional components
Update state dynamically
Trigger re-render when state changes

It follows this syntax:

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

state → Current value of the state
setState → Function to update the state
initialValue → Default value of the state

Example – Counter Component

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // Initial state = 0

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

count is the state variable
setCount updates the state
Clicking buttons updates the state and React re-renders the component automatically

Importing `useState`

To use useState, import it from React at the top of your component:

import { useState } from "react";

Example – Favorite Color

import { useState } from "react";
import { createRoot } from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initial state = "red"

  return (
    <><h1>My favorite color is {color}!</h1>
      <button type="button" onClick={() => setColor("blue")}>
        Blue
      </button>
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <FavoriteColor />
);

Multiple State Variables

You can declare multiple useState hooks to track independent data:

Each state variable is independent
Improves readability and maintainability

function MyCar() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <><h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  );
}

Using a Single Object for State

Instead of multiple useState calls, you can track all values in a single object:

function MyCar() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red",
  });

  const updateColor = () => {
    setCar(prevCar => ({ ...prevCar, color: "blue" }));
  };

  return (
    <><h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button onClick={updateColor}>Change Color</button>
    </>
  );
}

Updating State Based on Previous State

When the new state depends on the previous state, use a function inside setState:

This ensures accurate updates even when multiple state changes happen quickly.

setCount(prevCount => prevCount + 1);

What Can State Hold?

The useState hook can store:

Strings → "Hello"
Numbers → 42
Booleans → true or false
Arrays → [1, 2, 3]
Objects → { key: value }
Or any combination of these

For example:

const [state, setState] = useState({
  name: "Alice",
  age: 25,
  hobbies: ["reading", "gaming"],
  isAdmin: true
});

Why useState is Important?

Makes functional components stateful and interactive
Triggers automatic re-renders on state change
Keeps logic clean and modular
Works seamlessly with other hooks like useEffect

React Handbook