How do I spot common React and async bugs?
Understand the concept
React and async bugs often come from incorrect assumptions about identity, snapshots and completion order. A render's values can be captured by a callback, and asynchronous results may arrive after the UI has moved on. Review the lifecycle and timeline rather than checking syntax alone.
Important ideas
-
Unstable list keys can attach state to the wrong item; use stable IDs.
-
Missing effect cleanup can leave listeners or stale requests running.
-
forEach(async ...)does not await completion; choose sequential work or bounded concurrency. -
For each effect, identify setup, dependencies, cleanup and what happens if an old request finishes late.
Can you explain it without the notes?
How do I spot common React and async bugs?
Use your own words. Explain an example and one limitation before checking the explanation.
Check your explanation
React and async bugs often come from incorrect assumptions about identity, snapshots and completion order. A render's values can be captured by a callback, and asynchronous results may arrive after the UI has moved on. Review the lifecycle and timeline rather than checking syntax alone.
Turn this concept into a clear answer.
- Walk through two renders or two overlapping requests and show which value or result the code will actually use.
Adapted from 11_AI_CODE_REVIEW.md · “How do I spot common React and async bugs?”. Examples are study fragments; framework behavior can depend on your version.