Advanced React

Chapter 15 · 8 examples

Data fetching and race conditions

What is a Promise? · Promises and race conditions · Race condition reasons · Fixing race conditions: force re-mounting · Fixing race conditions: drop incorrect result · Fixing race conditions: drop all previous results · Fixing race conditions: cancel all previous requests · Does Async/await change anything?

  1. Example 1The race condition demo
  2. Example 2Stale fetch overwrites fresh
  3. Example 3Re-mounting avoids the race
  4. Example 4Compare result id via ref
  5. Example 5Compare result url via ref
  6. Example 6Cleanup closure flag
  7. Example 7Cancel with AbortController
  8. Example 8Async/await same race