State with useState

📘What it really is

• State is data a component remembers between redraws, which can change over time: what's typed in a search box, which tab is open, the list of enquiries.

• useState creates a piece of state:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

• count is the current value;
• setCount is the only way to change it;

• 0 is the starting value.

• Calling the setter tells React to re-render (run the component function again) with the new value.

• Changing a normal variable does nothing on screen; only state changes cause re-renders.
• useState is a hook. Hooks are called at the top level of a component, never inside if statements or loops (Module 34 explains why).