State (useState)

State is data inside a component that can change over time. It's used for things like incrementing a count on button click, typing into an input, opening/closing a modal, or adding an item to a cart. When state changes, React re-renders the component and updates the UI.

import { useState } from 'react';

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

  function increase() {
    setCount(previousCount => previousCount + 1);
  }

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

`count` holds the current value, and `setCount` is the function that updates it. Every time the button is clicked, the `increase` function runs and count goes up by one.

Every time you click the button, the number in the UI increases — `You clicked 1 times`, `2 times`, and so on.