Variables Reset Every Render

Foundational

Regular variables are created and destroyed on every render. This is the #1 gotcha for React beginners.

The Problem

When React re-renders your component, it calls your function again from the top. Any variable declared with let or const is re-created with its initial value. Your previous changes? Gone.

broken-counter.tsx

function Counter() {
  let count = 0;          // runs every render → always 0

  function handleClick() {
    count = count + 1;    // changes the local variable...
    console.log(count);   // logs 1, 2, 3 ...
  }

  return <span>{count}</span>; // but React already read 0
}

See It Break

Click the button. The display value is stuck at 0 because let count = 0 runs on every render. The actual clicks are tracked with a ref so you can see the difference.

WATCHVariables Reset Every Render

Display value

let count = 0 (resets!)

Actual clicks

useRef (persists)

Why This Matters

This is exactly why useState exists. It stores the value outside the function so it survives re-renders.

fixed-counter.tsx

function Counter() {
  // React stores this OUTSIDE the function
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);  // tells React → schedule re-render
  }

  return <span>{count}</span>; // shows the latest value
}

Key takeaway:

Regular variables reset every render — don't use them for state
useState persists values across renders
useRef also persists values, but without triggering re-renders