fw-02 step 03 — State, effects, and the snapshot model

Goal

Discover the rules of hooks by implementing the mechanism that requires them, and meet the stale closure on purpose.

Tasks

  1. useState with a per-instance slot list indexed by call order. Get stage 6 green, including independent state for two instances of the same component.
  2. Violate hook order deliberately — call a hook conditionally. Explain the failure precisely in terms of your slot list. You will explain it better than the docs do.
  3. useEffect with dependency comparison. Get stage 7 green, including cleanup before the next run and correct ordering.
  4. Stale closure. Write the setInterval that captures count from the first render. Fix it with a functional updater. Explain via "every value in a component body is a snapshot of one render."
  5. Missing cleanup. Subscribe without unsubscribing; leak across remounts; find it in a heap snapshot using the bi-04 retainer-chain skill.
  6. Over-specify dependencies and produce an infinite effect loop. Describe the tension.

Done when

  • 13/13 passing
  • Hook-order violation explained mechanically
  • Stale closure and leak both reproduced and fixed
  • You can price the alternatives to positional storage