React Hydration Explained 🔥

#webdev #react #javascript #programming

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.

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.

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.

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'));

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 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 ;)