Progressive Hydration with Selective Hydration
Use React 18's selective hydration to prioritize hydrating components the user interacts with first.
What Is Selective Hydration?
Selective hydration is a React 18 feature that allows React to begin hydrating components as soon as their JavaScript code arrives, without waiting for the entire page's JavaScript to download. Each independently code-split section hydrates as its bundle loads, not all at once.
React 18: No Big Bang Hydration
Before React 18, hydration was "all or nothing" — React had to download all JavaScript and hydrate the entire tree before any part of the page became interactive. React 18 breaks this constraint: portions of the tree hydrate independently as their code and data become available.
All lessons in this course
- React 18 Streaming: How renderToPipeableStream Works
- Suspense Boundaries and Streaming Priority
- Progressive Hydration with Selective Hydration
- Measuring Streaming Impact: FCP, TTI, and LCP