Performance wins with React 18
summary
Live demos show wrapping slow updates with useTransition/startTransition drops TBT from 4425 ms to 105 ms, about 42× faster. Another pattern uses deferred value + React.memo so counters stay instant while large lists update later. Covers automatic batching and flushSync for controlled renders, Suspense for streaming SSR and independent fallbacks, and React Server Components as used in Next.js where the server sends a serialized component payload and client components retain state across route changes.
AI-written summary · about
chapters (14)
- 0:00Introduction and mic check
- 0:28What is React 18
- 1:09Rendering performance basics
- 3:16Slow rendering example
- 6:23Concurrent rendering explained
- 8:34Using useTransition hook
- 11:27Using useDeferredValue hook
- 16:08Automatic batching in React 18
- 18:16Suspense for data fetching
- 21:30Suspense with server rendering
- 24:22React Server Components overview
- 27:51Benefits of Server Components
- 29:42State retention in Server Components
- 30:04Closing and resources
related talks
16mPerformance in React and Next.js
30mConcurrent Rendering in React
19mAll About React 18
28mConquering Concurrent React
31mReact Server Components Elevating Speed, Interactivity, and User Experience
20mPerformance Anxiety with React: Track and increase speed of your apps
02h 50mReact: Internals and Advanced Performance Patterns
17mGetting Fluent with React