useState

useState gives a component a value that survives re-renders and a setter that schedules a re-render when it changes. Each call to the setter replaces the value; React batches several into one render.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what useState keeps between renders and what the setter does
Write a counter and a toggle with useState
Spot the in-place mutation that React does not see

In practice

A few lines that show useState doing its job.

TSX

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

  const addThree = () => {
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    setCount((c) => c + 1);      // 3, because each uses the latest value
  };

  return <button onClick={addThree}>{count}</button>;
}

The common mistake

Watch for

Mutating state in place, like items.push(x) followed by setItems(items). The array is the same object, so React sees no change and skips the render. Create a new array: setItems([...items, x]).

What to know first

Your roadmap puts these before useState, unless you already know them.

Function components

How it stays learned

Once a session shows you understand useState, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on useState.

Next in the moduleEvent handlers →