Unveiling React Hydration: the secret of fast interactivity

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

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

1. Client-Side Rendering (CSR)

Client-side rendering happens 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.

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 requests (data fetching) on the server, improving the user experience. In SSR, the initial HTML is loaded while the JavaScript necessary for interactivity is loaded in the background.

What is React Hydration?

Hydration is the process of taking pre-rendered HTML from the server and making it interactive in the browser. In other words, React checks the existing HTML and binds the necessary JavaScript to activate the components, enabling interactivity. This speeds up page loading since the static content (initial HTML) loads quickly while interactivity is enabled later.

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

Why do client-only frameworks not have Hydration?

Client-only frameworks or libraries, like 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.” Therefore, client-only frameworks utilize the process known as Client-Side Rendering (CSR), and the concept of hydration does not apply to them.

Explaining simply

Imagine you have a page ready that is fully rendered with all visible content, but it does nothing when you click the buttons. The role of React Hydration is to give life to this page, 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 by the hydrateRoot method. See below an example of how it was before and how it is now:

Before:

import { hydrate } from ‘react-dom’;
hydrate(<App />, document.getElementById(‘root’));

After:

import { hydrateRoot } from ‘react-dom/client’;
hydrateRoot(document.getElementById(‘root’), <App />);

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

Main differences

•    hydrate (React 18 and earlier): Initiates the hydration process at the point where the server left 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.

Well, that’s basically it about hydration 😉