React 18 Concurrency, Explained
summary
Explains how React 18 implements concurrency: concrete APIs like startTransition/useTransition and Suspense for hydration, Chromium 87 hooks, and the low-level scheduling trickery (messageChannel/setTimeout) that gives control back to the browser every ~5ms so renders yield between frames. Shows numbers and effects: blocks drop TBT but non‑urgent updates take longer and overall CPU rises; single long component still blocks. Notes why Vue/Preact refuse and when Suspense hydration helps or hurts.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 2:49Slow app with React 17
- 7:50Urgent updates in React 17
- 10:39Non-urgent updates in React 18
- 13:06useTransition for renders
- 18:10Concurrent rendering in React 18
- 25:33Concurrent hydration with Suspense
- 30:12Why wrapping entire app in Suspense is bad
- 33:22Drawbacks of concurrency
- 41:26Summary
