Using State (useState Hook)

The useState hook lets you add reactive state to function components.

Basic useState

import { useState } from "react";

const Home = () => {
  const [name, setName] = useState("Mario");
  const [age, setAge] = useState(25);

  const handleClick = () => {
    setName("Luigi");
    setAge(30);
  };

  return (
    <div>
      <p>{name} is {age} years old</p>
      <button onClick={handleClick}>Change</button>
    </div>
  );
};

How State Works

• State changes trigger a re-render
• Use the setter function, never mutate state directly
• State is local to each component instance