Skip to content

Debugging drills

1. State belongs to the wrong topic

Reorder a list keyed by index after each card gains local state. Diagnose using React DevTools and explain identity-based preservation.

2. Newer search results disappear

Issue overlapping requests where the slower first response wins. Reproduce with throttling, inspect request order, then add cancellation and relevance checks.

3. Effect loops forever

An effect derives filtered data and sets state while depending on a newly created value. Trace render, commit, effect, and update; remove unnecessary synchronization.

4. GitHub Pages is blank

Inspect network paths and built HTML. Verify Vite base, hash routing, artifact root, and the location of /docs/.

Debugging protocol

Reproduce reliably, narrow the failing boundary, state a falsifiable hypothesis, collect one discriminating signal, fix the cause, and add regression coverage.