The document discusses strategies for finding and fixing race conditions in asynchronous programming, emphasizing that response times cannot be assumed to be constant. It highlights that debouncing is not an effective solution for race conditions and suggests using randomized delays in development to identify these issues. Additionally, it recommends utilizing external stores to manage potential race conditions outside of React.

1. 2024
Chaos Mode
Finding & Fixing Race
Conditions
Forbes Lindesay

6. User Frontend Backend

7. User Frontend Backend
Types:
“Hello”

8. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”

9. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”

10. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”

11. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”

12. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”

13. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”

14. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

15. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

16. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

19. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

20. User Frontend Backend
Types:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

21. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

22. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

23. Chaos Mode

24. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”
⌛

31. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”
⌛

32. Make it work

35. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

36. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

37. Make it fast

44. User Frontend Backend

45. User Frontend Backend
Types:
“Hello”

46. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”

47. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Types:
“ World”

48. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Types:
“ World”

49. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”

50. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”

51. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”

52. User Frontend Backend
Types:
“Hello”
Searches:
“Hello”
Responds with results for:
“Hello”
Renders with results for:
“Hello”
Types:
“ World”
Searches:
“Hello World”
Responds with results for:
“Hello World”
Renders with results for:
“Hello World”

53. Key Points
• You cannot assume async requests take a constant amount of time.
• Debouncing does not solve race conditions, at best it can hide the issue.
• Use randomised delays to
fi
nd race conditions in development.
• Use external stores to handle potential race conditions outside of React.