Build Snappier Apps with React and Web Workers
summary
Claim: moving CPU work off the main thread with Web Workers keeps UI smooth. Demonstration: a naive Fibonacci(42) blocks the main thread for ~5.5s and drops frames; running it in a worker takes ~5.79s but the animation stays at ~60fps (16ms frame budget). Implementation details include messaging via postMessage, tooling support from bundlers (example spelled veet in captions), and higher‑level patterns using comlink or react query for async integration.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 0:56Web performance concepts
- 3:42Understanding frame budgets
- 6:14Main thread blocking
- 10:27Performance demonstration
- 13:36Concurrency vs parallelism
- 16:20Web workers overview
- 21:06Implementing web workers
- 25:55Advanced patterns
- 27:51When to use web workers
related talks
32mRise of the Web Workers
19mLet the Main Thread Breathe!
13mHow to Use Web Workers for Fun and Profit
29mParallel computing in ReactJS: Provide a pleasant user experience
36mMultithreading in React: A guide to Web Workers
53mLet the main thread breathe!
34mParallel computing in React
29mTyler Clark - React to Web Workers