React's Stale Closure Problem in Hooks

Why it exists

React components re-render when state or props change, creating new functions and values. However, some effects, like setting up a subscription or a timer, should only run once. This creates a conflict: how can a function inside a one-time effect access the latest state from subsequent renders?

The mental model

Think of a useEffect with an empty dependency array ([]) as taking a photograph of your props and state on the first render. Any function defined inside that effect is looking at that old photograph. Even if the real-world scene (your component's state) changes, the function inside the effect still sees the original, stale image.

How it works

When a component mounts, useEffect with [] runs its setup function. If that setup includes an asynchronous callback, like for setInterval or a WebSocket's onmessage handler, that callback forms a closure. It captures the props and state as they existed during that initial render. When state updates later, the component re-renders, but the original effect and its closure are unaffected. The callback continues to execute with the initial, now-stale values. The traditional fix, adding the state to the dependency array, would cause the effect to tear down and re-run on every state change, which is often not what you want (e.g., resetting a timer or a connection).

When to use it

The stale closure problem is solved by separating the event-like logic from the effect's lifecycle. The useEffectEvent hook (in React 19+) is designed for this. You wrap the logic that needs fresh state (like onMessage or onTick) in useEffectEvent. You can then call this stable function from inside your useEffect without adding it to the dependency array, ensuring it always accesses the latest props and state.

When not to use it

Do not use this pattern to simply silence the dependency linter. If an effect's core logic must re-synchronize when a value changes (e.g., re-fetching data when an id prop changes), that value belongs in the dependency array. useEffectEvent is for functions that behave like event handlers fired from an effect, not for values that control the effect's existence.

One canonical example

Imagine a setInterval in a useEffect that logs a count state every second. If useEffect has an empty dependency array, it will log the initial count (e.g., 0) forever, even as the count state increases. The function inside setInterval has a stale closure over the initial count. Wrapping the console.log(count) logic in useEffectEvent and calling it from the interval would solve this, as it would always read the latest count without needing to reset the interval itself.