React 18 Concurrency, Explained
summary
Chrome DevTools profiling shows a blocking re-render as a single 600ms JavaScript task that freezes the UI; switching a filter update to a non-urgent update via startTransition/useTransition splits work into many small tasks (~5–7ms) so React yields to the browser between frames, making the spinner responsive while full rendering takes about 600ms vs 900ms. Implementation uses DevTools and React DevTools, mentions why-did-you-render, and warns: more CPU, longer total time, single slow component still blocks and some features rely on Chromium-only APIs.
AI-written summary · about
chapters (10)
- 0:00Introduction to React 18
- 2:27Identifying performance issues
- 3:49Profiling with devtools
- 7:53Traditional optimizations
- 12:03Implementing useTransition
- 17:38Concurrent rendering results
- 20:05How concurrency works
- 23:32Under the hood of React 18
- 27:44Drawbacks and future outlook
- 36:07Q&A and closing
