Topic

Challenge: stale state and Effects

Definition

A stale closure occurs when asynchronous or deferred code reads state captured by an earlier render instead of the current value required by the behavior.

In simpler words

A timer or Effect can remember an old value if its dependencies or update form are wrong.

This challenge reinforces that Effects synchronize external systems; they are not a workaround for state flow.

After this you can

Spot a stale state bug
Select a dependency-safe update

Debug the render boundary

Definition

React closures capture values from the render that created them, so state updates based on a previous value should use the functional updater form.

In simpler words

Let React supply the latest value instead of trusting an old captured value.

Inspect the Effect dependencies and whether the callback needs the previous state.

Keep cleanup paired with subscriptions and timers.

Challenge lab

Bug report

The elapsed counter sometimes stops at 1 after a route transition.

What is broken

An interval Effect calls setElapsed(elapsed + 1) with an empty dependency list.

Broken snippet

useEffect(() => {
  const id = setInterval(() => {
    setElapsed(elapsed + 1); // stale closure
  }, 1000);
  return () => clearInterval(id);
}, []); // elapsed missing — and restarting on elapsed is worse

Pass criteria

Counter continues from the current value
Interval is cleaned up on unmount
No unnecessary Effect restart

Choose the correct fix

Use setElapsed(value => value + 1) inside the interval and keep cleanup.Add elapsed to dependencies but keep setElapsed(elapsed + 1).Increment a normal elapsed variable inside the callback.Remove cleanup so the original interval stays alive.

Keep in mind

If a value is derived during render, do not mirror it into Effect-managed state.