Understanding Capture Value in React Hooks: Why State Updates Lag and How to Fix Them

1. Starting with an example

In React applications asynchronous requirements are common. The example requirement is a button that shows false by default, changes to true on click, and reverts to false after two seconds.

const Demo = (props) => {
  const [flag, setFlag] = useState(false);
  let timer;
  function handleClick() {
    setFlag(!flag);
    timer = setTimeout(() => {
      setFlag(!flag);
    }, 2000);
  }
  useEffect(() => {
    return () => {
      clearTimeout(timer);
    };
  });
  return (
    <button onClick={handleClick}>{flag ? "true" : "false"}</button>
  );
};

2. Introducing Capture Value

Capture Value can be understood as a “solidified” value. The useState hook returns [hook.memorizedState, dispatch]. When setFlag is called, hook.memorizedState points to a new state, but a setTimeout callback still references the old state, so it reads the stale value.

Each Render Has Its Own Props and State.

Viewing each render as an independent snapshot helps explain this behavior. In a counter example, each click triggers a new render where the count value is captured and displayed, illustrating the Capture Value phenomenon.

// useState Capture Value example
function Counter(props) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

Each render fixes the count at 0, then 1, then 2, demonstrating Capture Value. The same principle applies to event handlers and useEffect.

function Counter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('useEffect count:', count);
  });
  return (
    // ...
  );
}

3. How to bypass Capture Value

Using the initial button example, the bug occurs because the timeout callback reads the stale flag. Storing the latest state in a useRef allows the callback to access the current value.

const Demo = (props) => {
  const [flag, setFlag] = useState(false);
  const flagRef = useRef(flag);
  flagRef.current = flag;

  function handleClick() {
    setFlag(!flagRef.current);
    setTimeout(() => {
      setFlag(!flagRef.current);
    }, 2000);
  }
  // ...
};

This resolves the issue, though the demo focuses only on the Capture Value of flag.

4. Underlying principle

Understanding Capture Value reveals that each re‑render re‑executes the function component, and previously executed components are not revisited. This insight helps write higher‑quality hook‑based code.

5. References

Hooks Exploration, “Complete Guide to useEffect”