useState Internals and Functional Updates

useState Is useReducer in Disguise

Want to know a secret? Inside React's source code, useState is implemented as a thin wrapper around useReducer:

// Simplified React source (packages/react-reconciler)
function mountState(initialState) {
  const hook = mountWorkInProgressHook();

  if (typeof initialState === 'function') {
    initialState = initialState(); // Lazy initialization
  }

  hook.memoizedState = hook.baseState = initialState;

  const queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: initialState,
  };
  hook.queue = queue;

  const dispatch = (queue.dispatch = dispatchSetState.bind(null, currentlyRenderingFiber, queue));

  return [hook.memoizedState, dispatch];
}

function basicStateReducer(state, action) {
  return typeof action === 'function' ? action(state) : action;
}

The basicStateReducer reveals the duality: if you pass a value, it replaces state. If you pass a function, it calls the function with current state.

The Update Queue

So what actually happens when you call setState? React does not update state immediately. It creates an update object and adds it to a circular linked list (queue):

// Simplified update object
{
  action: valueOrFunction,  // What you passed to setState
  hasEagerState: false,     // Optimization flag
  eagerState: null,         // Pre-computed state (if possible)
  next: nextUpdate,         // Circular linked list
}

Eager State Computation

React has an optimization: if the component is not already rendering, it tries to compute the new state immediately:

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

  function handleClick() {
    setCount(1); // React can eagerly compute: Object.is(0, 1) → false → schedule render
  }
}

If Object.is(currentState, eagerState) is true, React bails out without scheduling a render. This is why setCount(count) with the same value does not trigger a re-render (after the first time).

Lazy Initialization

This is a small optimization that makes a big difference. If computing the initial state is expensive, pass a function:

// BAD — createInitialTodos() runs on EVERY render
const [todos, setTodos] = useState(createInitialTodos());

// GOOD — createInitialTodos() runs only on mount
const [todos, setTodos] = useState(() => createInitialTodos());

// Also GOOD for parsing from localStorage
const [settings, setSettings] = useState(() => {
  const stored = localStorage.getItem('settings');
  return stored ? JSON.parse(stored) : defaultSettings;
});

The function form (lazy initializer) is called only during mount. On subsequent renders, React reads the stored state from the hook and ignores the initializer entirely.

Object.is and the Bailout

React uses Object.is (not ===) to compare previous and next state:

Object.is(0, 0);           // true  → no re-render
Object.is('hello', 'hello'); // true  → no re-render
Object.is(NaN, NaN);       // true  → no re-render (unlike ===)
Object.is(0, -0);          // false → re-render (unlike ===)
Object.is({}, {});          // false → re-render (different references)

The critical implication for objects and arrays:

const [items, setItems] = useState([1, 2, 3]);

// This triggers re-render (new array):
setItems([1, 2, 3]);

// This does NOT trigger re-render (same reference):
setItems(items);

// This SHOULD trigger re-render but DOESN'T (mutation + same ref):
items.push(4);
setItems(items); // Object.is(items, items) → true → BAIL OUT

// Correct: create new array
setItems([...items, 4]);

Functional Updates: When and Why

Functional updates aren't just a nice-to-have — they solve two problems that will definitely bite you:

Problem 1: Stale Closures

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

  function incrementThree() {
    // BUG: All three read the same stale count (0)
    setCount(count + 1); // 0 + 1 = 1
    setCount(count + 1); // 0 + 1 = 1
    setCount(count + 1); // 0 + 1 = 1
    // Result: 1

    // FIX: Functional updater chains correctly
    setCount(prev => prev + 1); // 0 → 1
    setCount(prev => prev + 1); // 1 → 2
    setCount(prev => prev + 1); // 2 → 3
    // Result: 3
  }
}

Problem 2: Stale Values in Callbacks

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

  useEffect(() => {
    const id = setInterval(() => {
      // BUG: count is always 0 (closure captures initial value)
      setCount(count + 1); // Always 0 + 1 = 1

      // FIX: Functional updater reads latest state
      setCount(prev => prev + 1); // Works correctly
    }, 1000);
    return () => clearInterval(id);
  }, []); // Empty deps — closure captures count = 0

  return <div>{count}</div>;
}

Production Scenario: Optimistic Update with Rollback

function TodoItem({ todo, onUpdate }) {
  const [optimisticTitle, setOptimisticTitle] = useState(todo.title);
  const [isSaving, setIsSaving] = useState(false);

  async function handleSave(newTitle) {
    const previousTitle = optimisticTitle;
    setOptimisticTitle(newTitle); // Optimistic update
    setIsSaving(true);

    try {
      await onUpdate(todo.id, newTitle);
    } catch {
      setOptimisticTitle(previousTitle); // Rollback on failure
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <div>
      <span>{optimisticTitle}</span>
      {isSaving && <span>Saving...</span>}
    </div>
  );
}

Challenge: Predict the Queue

Challenge: State Queue Processing

// What is the final value of count after handleClick runs?

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

  function handleClick() {
    setCount(prev => prev + 1); // ?
    setCount(prev => prev * 2); // ?
    setCount(10);                // ?
    setCount(prev => prev + 3); // ?
  }

  return <button onClick=`{handleClick}`>`{count}`</button>;
}