Concurrent Rendering in React
summary
Shows that switching to React 18 concurrency turns a janky dashboard into a responsive one by deprioritizing heavy renders with useTransition + startTransition and useDeferredValue. A mocked widget that falls from 60 FPS to 9 FPS under load now keeps input and scrolling smooth while background updates commit later. Demonstrates Suspense and SuspenseList for ordered lazy hydration, cites batching caveats and recommends profiling to avoid race conditions and wasted re-renders.
AI-written summary · about
chapters (18)
- 0:00Introduction and setup
- 2:06Problem with React dashboards
- 5:20Performance issues in apps
- 7:06React rendering limitations
- 9:36Concurrency in React
- 12:43Demo of useTransition
- 14:54Demo of filtering with concurrency
- 16:17Approaches with useTransition
- 17:20Using useDeferredValue
- 18:02Suspense for rendering
- 20:08Suspense with user interaction
- 21:36Demo of Suspense component
- 23:24Designing with concurrency
- 25:08Monitoring performance
- 26:54Accessibility and design
- 27:35Common pitfalls and solutions
- 28:37React scheduler insights
- 29:19Migration to React 18
