DEV Community

Cover image for React Hydration Explained 🔥
Marcos Mendes
Marcos Mendes

Posted on

50 2 2

React Hydration Explained 🔥

Definition of Hydration by Dan Abramov (Create React App and Redux): "Hydration is like watering 'dry' HTML with the 'water' of user interactivity and event handlers."

Hydration is an advanced and fundamental topic for better understanding how React works. Before diving deeper into this concept, let’s briefly review some important topics:

1. Client-Side Rendering (CSR)

Client-side rendering occurs when all pages are loaded and rendered directly in the browser using JavaScript. In this way, the browser is responsible for handling all requests (data fetching), managing loading states, and other interactions.

Image description

2. Server-Side Rendering (SSR)

In server-side rendering, pages are generated on the server using JavaScript and sent as HTML to the client. This process optimizes data fetching on the server, improving the user experience. In SSR, the initial HTML is loaded while the JavaScript needed for interactivity is loaded in the background.

Image description

What is React Hydration?

Hydration is the process of taking pre-rendered HTML on the server and making it interactive in the browser. In other words, React checks the existing HTML and associates the necessary JavaScript to activate the components, enabling interactivity.

This speeds up page loading since the static content (initial HTML) is quickly loaded while interactivity is enabled afterward.

Image description

It is worth noting that hydration does not directly apply to libraries or frameworks that function only on the client (client-only), such as React when used exclusively on the client side.

Why don’t client-only frameworks have Hydration?

Client-only frameworks or libraries, such as React in a pure CSR model, render pages directly in the browser, generating the DOM from scratch with JavaScript. In this case, there is no pre-rendered HTML from the server to be “hydrated.”

Thus, client-only frameworks use a process known as Client-Side Rendering (CSR), and the concept of hydration does not apply to them.

Explained simply

Imagine you have a page ready and already rendered with all visible content, but it does nothing when you click buttons. The role of React Hydration is to bring this page to life, connecting what you see on the screen to the code responsible for making it interactive.

When React performs the hydration process, it "animates" the page, linking the visible components to the code, making buttons and other elements functional and interactive in the browser.

Hydration in React 19

In React 19, the hydrate method (responsible for hydration) was removed and replaced with the hydrateRoot method. Below is an example of how it was before and how it is now:

Before:

import { hydrate } from 'react-dom';
hydrate(<App />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

After:

import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);
Enter fullscreen mode Exit fullscreen mode

This update was introduced by the React team to improve the hydration process and compatibility with new APIs in React 19.

Main differences:

  • hydrate (React 18 and earlier): Starts the hydration process at the point where the server left off with the HTML.
  • hydrateRoot (React 18 and later): Replaces hydrate and provides a more modern and flexible API, especially to support features like streaming and transitions in React.

That’s basically it about hydration ;)

The Fastest, Most Accurate API for Voice AI

Ad Image

Building an AI Agent that needs to deliver human-like conversations? | Speechmatics’ real-time ASR is available in 50 languages and can understand speech in a fraction of a second.

Try Free

Top comments (6)

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Very nice graphs 🙌

Collapse
 
iamdevmarcos profile image
Marcos Mendes

thanks bro

Collapse
 
ashwin_mothilal profile image
Ashwin Mothilal

Great article, do you have any references on what exactly hydration does and how it does and how react implements it?

Collapse
 
iamdevmarcos profile image
Marcos Mendes
Collapse
 
marcosdev82 profile image

Conteúdo muito bom. Achei o fluxo dessa arquitetura bem interessante. Vou estudar mais afundo. Valeu pela dica.

Collapse
 
iamdevmarcos profile image
Marcos Mendes

🚀

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay