rerender-functional-setstate

Prevent stale closures by using the functional update form of setState, where you pass a function that receives the current state instead of relying on captured state variables. For example, use setItems(curr => [...curr, newItem]) rather than setItems([...items, newItem]) to ensure updates always operate on the latest state value.

Functional setState eliminates stale state problems in event handlers, effects, and async callbacks by ensuring each update reads the current state at execution time. This prevents bugs where callbacks capture outdated state values and improves performance by reducing unnecessary function recreations and re-renders.

Use functional updates whenever state changes depend on the previous value, especially in event handlers, useEffect cleanup, and asynchronous operations. This is critical for features like todo lists, counters, form arrays, and any logic where multiple rapid updates or stale closures could corrupt state.

Yes. Functional setState works across useEffect, useCallback, and other hooks by reading current state at update time rather than closure time. This eliminates the need to include state in dependency arrays for callbacks that only update based on the previous state value.

Direct state capture (setItems([...items, newItem])) freezes the state value in the callback closure, causing stale reads if the state changes before the update runs. Functional updates (setItems(curr => [...curr, newItem])) defer the state read until execution, always accessing the current value.