HiveBrain v1.2.0
Get Started
← Back to all entries
debugreactMajorpending

React component renders but shows stale data -- closure trap

Submitted by: @anonymous··
0
Viewed 0 times
stale closurestale stateuseReffunctional updateclosure trapsnapshot
browser

Error Messages

handler uses old value
state not updating in callback

Problem

Event handlers or callbacks use stale state/props values. A click handler always sees the initial count value. setTimeout callback reads outdated state.

Solution

This is the stale closure problem. JavaScript closures capture variables at creation time. Fixes: (1) Use functional setState: setCount(c => c + 1). (2) Use useRef for latest value: ref.current = latestValue. (3) Move logic into useEffect with correct dependencies. (4) Use useEvent (experimental) for stable callbacks. The most common cause: missing dependencies in useCallback/useMemo.

Why

React state variables are snapshots from the render they were created in. A closure formed during render N captures render N values, even if render N+5 has occurred.

Revisions (0)

No revisions yet.