Bye‑bye Race Conditions — Detect Them Before Our Users!
summary
Shows how to detect front-end race conditions by applying property-based fuzzing to a React autocomplete. It injects scheduler-controlled promise reordering into mocked API calls, uses fast-check with Jest to randomize and replay response orders and produce a shrunk counterexample where three overlapping requests return out of order and break suggestions. Presents fixes (request cancellation, sequence IDs, or libraries like React Query) and demonstrates deterministic reproduction via seeds so bugs are found before users encounter them.
AI-written summary · about
chapters (9)
- 0:00Race conditions intro
- 3:12Definition and risks
- 5:37React example
- 8:07Testability issues
- 13:21Property-based testing with fast-check
- 18:16Advanced random generation
- 21:24Solutions and fixes
- 24:28Summary and best practices
- 26:16Q&A
related talks
28mDetecting the unexpected in React applications
37mReact Tune Up
37mFront-end Testing for Skeptics
49mFront-end Testing on Steroids
27mThe weird things about React
34m90% Cleaner React
29mBlink and you’ll miss it: Stories from discovering most annoying bugs and test flakes
45mReact refactoring, off the hook(s)!