What does hydration mean in React, and why is it needed?

Hydration is React attaching event handlers to server-rendered HTML.

When using Server-Side Rendering (SSR), the browser first receives static HTML, which loads fast.
Hydration then connects this HTML with React’s JavaScript so the app becomes interactive.

Why hydration is important

• Faster initial page load
• Better SEO
• Smooth transition from static HTML to a fully interactive React app

What happens during hydration

1. Server sends pre-rendered HTML
2. Browser displays the content immediately
3. React attaches event listeners and state to the existing DOM

Note:
React does not re-create the DOM during hydration.
It reuses the existing HTML and attaches behavior to it.