-
Book Overview & Buying
-
Table Of Contents
React Design Patterns and Best Practices - Fifth Edition
By :
Hydration is the process where React takes over server-rendered HTML and makes it interactive. During hydration, React reconstructs its internal representation of the component tree, attaches event listeners, and sets up state management, all while ensuring the existing DOM matches what React would have rendered. Poor hydration performance can make your application feel unresponsive during the critical first seconds after load.
Hydration isn't free. React must walk through your entire component tree, execute every component function, and reconcile with the existing DOM. The more components you have, the longer this takes. Users see your content but can't interact with it, buttons don't respond, forms don't work, until hydration completes:
// components/HydrationMonitor.tsx - Measure hydration time
'use client'
import { useEffect, useState } from 'react'
interface HydrationMetrics {
hydrationTime...
Change the font size
Change margin width
Change background colour