How do I spot common React and async bugs?

Short 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.

Key points:

• 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.

Interview point:

• Walk through two renders or two overlapping requests and show which value or result the code will actually use.