Chaos Mode - Finding & fixing race conditions

Slides from my 2024 React Alicante talk.

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 find race conditions in development.
•Use external stores to handle potential race conditions outside of React.