useState

Core Hook

Think of useState as a telephone switchboard. Each line is a state variable — plug in a cable and the board lights up, React re-renders.

🔌 Theme: Telephone Switchboard

Your component is a telephone switchboard. State values are connections — plug one in and the board lights up (re-renders). Without useState, you can move cables around all day, but the board stays dead. setState is the act of plugging a cable into a jack React can see.

The Dead Switchboard

Regular variables are like cables plugged into a switchboard that isn't powered. The value changes behind the scenes, but React never sees it — the display stays frozen.

DEAD BOARDUsing a regular variable

Active Lines

The Live Switchboard

useState wires the board to React. Every time you plug in a cable, React sees the connection change and re-renders the display immediately.

LIVE BOARDUsing useState

Active Lines

live-switchboard.tsx

function LiveSwitchboard() {
  const [activeLines, setActiveLines] = useState(0);

  function plugInCable() {
    setActiveLines(prev => prev + 1);
    // React sees the change → re-renders → board updates!
  }
}

Operator Briefing

Dead Switchboard

Cable plugged in, but the board doesn't register it
Display stays frozen — no re-render
Calls pile up, nobody gets connected

Live Switchboard

Every plug registers — React updates the board
Display refreshes to show current connections
setState is like plugging in a cable React can see

useState is like wiring the switchboard to React — every connection change lights up the board.

The Switchboard Floor

State isn't always a single line — booleans, numbers, and objects are all fair game. Each playground below demonstrates a different type of connection on the board.

🔌Line ToggleBoolean State

LINE 1

DISCONNECTED

OFFON

The line is disconnected. Toggle the switch to flip the boolean.

line-toggle.tsx

const [isConnected, setIsConnected] = useState(false);

// Toggle: flip the boolean
setIsConnected(prev => !prev);

📻Frequency TunerNumber State

Frequency

88.0 MHz

SIGNAL: 1/5

88.0108.0

frequency-tuner.tsx

const [frequency, setFrequency] = useState(88.0);

// Tune the dial
setFrequency(101.1);

// Fine-tune with updater
setFrequency(prev => Math.min(prev + 0.1, 108.0));

📞Call RouterObject State

Caller

Destination

Priority

Status

Active Call

Unknown

Office

Normal

Ringing

call-router.tsx

const [call, setCall] = useState({
  caller: "",
  destination: "Office",
  priority: "Normal",
  status: "Ringing",
});

// Update one field — spread to keep the rest!
setCall(prev => ({ ...prev, destination: "Office" }));

⚡Lazy WiringBest Practice

Pass a function to useState for expensive initial values. Otherwise the computation runs on every render — even though React throws the result away after the first.

Eager Wiring

useState(heavyComputation())

computations: 1renders: 1

Computation runs every render!

total = 1,249,975,000

Lazy Wiring

useState(() => heavyComputation())

computations: 1renders: 1

Computation runs only once!

total = 1,249,975,000

Red = computation runs every render. Green = runs once.

lazy-init.tsx

// Eager: runs EVERY render (slow!)
const [total, setTotal] = useState(
  heavyComputation() // called on each render
);

// Lazy: runs ONLY on first render
const [total, setTotal] = useState(
  () => heavyComputation() // called once
);

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

Mutating state directly

Editing the state object in place without calling the setter

Don't do this

counter.tsx

function Profile() {
  const [user, setUser] = useState({ name: "Alice", score: 0 });

  function handleClick() {
    user.score += 1;      // mutating the existing object
    setUser(user);        // same reference — React bails out
  }

  return <button onClick={handleClick}>{user.score}</button>;
}

React uses Object.is() to compare previous and next state. If you mutate the existing object and pass it back, the reference is identical so React skips the re-render entirely. Always produce a new object via spread or array methods.

Stale state in batched updates

Multiple setState calls reading the same stale snapshot

Don't do this

counter.tsx

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

  function handleTripleClick() {
    setCount(count + 1); // all three read the same count
    setCount(count + 1);
    setCount(count + 1); // result: 1, not 3
  }

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

When you call the setter multiple times in the same event handler, each call captures the same state snapshot from that render. Use the functional updater form setState(prev => prev + 1) so each call receives the latest queued value.

Expensive initializer runs every render

Passing an expression instead of a function to useState

Don't do this

list.tsx

function SortedList({ items }) {
  // items.sort() runs on EVERY render
  // even though React ignores the result after mount
  const [sorted, setSorted] = useState(items.slice().sort());

  return <ul>{sorted.map(i => <li key={i}>{i}</li>)}</ul>;
}

The initial value argument to useState is evaluated on every render, but React only uses it once — on mount. If you pass an expensive expression like items.sort(), it still runs every time. Wrap it in an arrow function to defer execution to mount only.

The Live Switchboard

useState wires the board to React. Every time you plug in a cable, React sees the connection change and re-renders the display immediately.

LIVE BOARDUsing useState

Active Lines

live-switchboard.tsx

function LiveSwitchboard() {
  const [activeLines, setActiveLines] = useState(0);

  function plugInCable() {
    setActiveLines(prev => prev + 1);
    // React sees the change → re-renders → board updates!
  }
}

Operator Briefing

Dead Switchboard

Cable plugged in, but the board doesn't register it
Display stays frozen — no re-render
Calls pile up, nobody gets connected

Live Switchboard

Every plug registers — React updates the board
Display refreshes to show current connections
setState is like plugging in a cable React can see

useState is like wiring the switchboard to React — every connection change lights up the board.

const [call, setCall] = useState({ caller: "", destination: "Office", priority: "Normal", status: "Ringing", }); // Update one field — spread to keep the rest! setCall(prev => ({ ...prev, destination: "Office" }));

// Eager: runs EVERY render (slow!) const [total, setTotal] = useState( heavyComputation() // called on each render ); // Lazy: runs ONLY on first render const [total, setTotal] = useState( () => heavyComputation() // called once );

function Profile() { const [user, setUser] = useState({ name: "Alice", score: 0 }); function handleClick() { user.score += 1; // mutating the existing object setUser(user); // same reference — React bails out } return <button onClick={handleClick}>{user.score}</button>; }

function Counter() { const [count, setCount] = useState(0); function handleTripleClick() { setCount(count + 1); // all three read the same count setCount(count + 1); setCount(count + 1); // result: 1, not 3 } return <button onClick={handleTripleClick}>{count}</button>; }

function SortedList({ items }) { // items.sort() runs on EVERY render // even though React ignores the result after mount const [sorted, setSorted] = useState(items.slice().sort()); return <ul>{sorted.map(i => <li key={i}>{i}</li>)}</ul>; }

useState

The Dead Switchboard

The Live Switchboard

Operator Briefing

The Switchboard Floor

Common Mistakes

useState

The Dead Switchboard

The Live Switchboard

Operator Briefing

The Switchboard Floor

Common Mistakes