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.

Open live example →

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.

Keep in mind

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

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

Checking your session…

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.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. What does a React challenge usually test?

Concept

Designing normalized SQL schemas for the UIConfiguring the frontend CI pipelineWriting end-to-end tests before any componentApplying state, lists, and events correctly under constraints

2. If state updates don’t show?

Syntax

Check you’re replacing state immutably and using settersAdd a key to force the component to remountWrap the setter in useMemo so it batchesMove the value into a ref so it updates faster

3. List challenge with edits?

Practical

Stable keys and lifted state for the list ownerArray index keys with per-row local stateA separate context for each row’s stateKeep list state in each child with no lifting

4. Derived UI in challenges?

Logic

Sync derived values into state inside an EffectMemoize derived values in a ref updated on changeCompute during render instead of Effect mirrorsRecompute derived values in an event handler only

5. Forms in challenges?

Concept

Uncontrolled inputs read via refs on submitControlled inputs with validation UXdefaultValue with validation only on blur via the DOMNative form submission with a full page reload

6. Component boundaries?

Practical

Lift every piece of state to the root componentSplit components by file size rather than responsibilityExtract presentational pieces; keep state where it belongsDuplicate shared state into each child component

7. Passing callbacks?

Syntax

Children mutate the parent’s state object by referenceChildren call parent setters via propsChildren dispatch to a shared store instead of propsParents read child state through a ref each render

8. When stuck on a challenge?

Logic

Reproduce the bug with console/React tools; simplifyAdd more state to work around the symptomRewrite the whole component from scratch immediatelyWrap the code in try/catch to hide the error

9. Purity reminder?

Concept

Fetching during render is fine if wrapped in useMemoDon’t fetch/setState unconditionally during renderMutating props is fine as long as you clone them firstReading context during render breaks purity

10. Success criteria mindset?

Practical

Match the reference screenshot pixel-for-pixelPass the linter and formatter with no warningsCover every line with unit tests firstMeet the stated UX/behavior checks, not just ‘it looks fine’

11. Starting at 0, what is count after one click?

Conceptadvanced

function onClick() {
  setCount(count + 1);
  setCount(count + 1);
}

2031 — both reads see the same snapshot; use the updater form

12. Why might the list not re-render?

Syntaxintermediate

function add(item) {
  items.push(item);
  setItems(items);
}

push returns the new length, not the array, so state is wrongsetItems needs a second render to flush the pushMutating the same array keeps the same reference; use [...items, item]You must call setItems twice for arrays to update

13. Why does this delete immediately on render?

Practicalintermediate

<button onClick={deleteItem(id)}>Delete</button>

React binds the handler on mount, so it runs thendeleteItem(id) is called during render; wrap it in () => deleteItem(id)Wrapping it in useCallback would defer the callThe id argument must be passed via a data attribute

14. What is the cleaner fix in this challenge?

Logicadvanced

const [items, setItems] = useState([]);
const [count, setCount] = useState(0);
useEffect(() => setCount(items.length), [items]);

Add count to the dependency array so it stays in syncWrap setCount in useCallback to avoid the loopStore count in a ref and update it in the EffectDerive const count = items.length during render and drop the Effect

15. Why is key={i} risky here?

Conceptintermediate

{rows.map((r, i) => <Row key={i} row={r} />)}
// rows can be sorted; Row has local state

Local Row state sticks to the index, not the item, after sortingIndex keys force a full remount of every row on sortIndex keys stop the rows from re-rendering after sortUsing the index drops the list’s scroll position on sort

Checking your session…