State and setState Batching

setState Does Not Update State Immediately

This is the single biggest source of confusion for React developers. When you call setState, the state variable does not change on the next line. It cannot. The update is queued, and React processes the queue later.

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

  function handleClick() {
    setCount(count + 1);
    console.log(count); // Still 0, not 1
    setCount(count + 1);
    console.log(count); // Still 0, not 1
  }

  // After handleClick runs, count will be 1, not 2.
  // Both setCount calls see count = 0.
  return <button onClick={handleClick}>Count: {count}</button>;
}

Both setCount calls use the same stale value of count (0). The result is 0 + 1 = 1 both times. React deduplicates the identical update, and count becomes 1.

The Functional Updater: Reading the Latest State

When the next state depends on the previous state, use the functional updater form:

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

  function handleClick() {
    setCount(prev => prev + 1); // prev = 0 → 1
    setCount(prev => prev + 1); // prev = 1 → 2
    setCount(prev => prev + 1); // prev = 2 → 3
  }

  // After handleClick: count = 3
  return <button onClick={handleClick}>Count: {count}</button>;
}

Each functional updater receives the most recent pending state, not the stale closure value. React applies them in order: 0 → 1 → 2 → 3.

setCount(5);           // Queue: [{ action: 5 }]
setCount(prev => prev + 1); // Queue: [{ action: 5 }, { action: fn }]
// Result: 5 (from first update), then fn(5) = 6

Batching in React 18

Before React 18, batching only happened inside React event handlers. Timeouts, promises, and native event handlers triggered a re-render for each setState call.

React 18 introduced automatic batching — all state updates are batched, regardless of where they happen:

function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  async function handleSearch(text) {
    setQuery(text);
    setLoading(true);
    // In React 17: TWO re-renders here (one per setState)
    // In React 18: ONE re-render (batched)

    const data = await fetch(`/api/search?q=${text}`);
    const json = await data.json();

    setResults(json);
    setLoading(false);
    // In React 17: TWO more re-renders
    // In React 18: ONE re-render (batched)
  }

  return (/* ... */);
}

Where React 18 Batches

Opting Out of Batching

In rare cases where you need a synchronous DOM update between state changes, use flushSync:

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  // DOM is updated here

  flushSync(() => {
    setFlag(f => !f);
  });
  // DOM is updated again here
}

The Object.is Comparison

React skips a re-render if the new state is identical to the current state, determined by Object.is():

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// This DOES trigger a re-render (new object reference):
setUser({ name: 'Alice', age: 30 });

// This does NOT trigger a re-render (same reference):
setUser(user);

// This also triggers a re-render (mutation + same ref is BAD):
user.age = 31;
setUser(user); // Same reference! React skips the update.
// The mutation is invisible to React.

Production Scenario: Multiple Related State Updates

function CheckoutForm() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);
  const [discount, setDiscount] = useState(0);

  function applyDiscount(code) {
    // All three updates are batched into one render
    const discountPercent = validateCode(code);
    setDiscount(discountPercent);
    setTotal(prev => prev * (1 - discountPercent / 100));
    setItems(prev =>
      prev.map(item => ({
        ...item,
        discountedPrice: item.price * (1 - discountPercent / 100),
      }))
    );
    // One render with all three state values updated
  }
}

Challenge: Predict the Count

Batching Behavior Analysis

3. `setCount(prev => prev + 1)` → queues function updater
4. `setCount(prev => prev + 1)` → queues function updater