hydration in React 18

What hydration is and why it changed

• Hydration is the process where React "brings to life" HTML already generated by the server: it attaches event handlers, restores state, runs effects, and makes the page interactive.
• Before React 18, hydration was fairly "monolithic": the entire component tree rendered and hydrated at once, which could block the main thread and cause delays, especially on weaker devices.

React 18 changed the approach so that hydration became more flexible, responsive, and performant.

---

#New hydration capabilities and changes in React 18

1. A new API: hydrateRoot instead of the old ReactDOM.hydrate Now hydrating server HTML uses:

The old ReactDOM.hydrate still works, but with a warning that its behavior will be like React 17's. This move to the new API is necessary to enable React 18's new hydration capabilities. (React) 2. Selective Hydration / partial priority-based hydration React 18 introduces the idea of selective hydration: it can hydrate parts of the interface where it matters, and prioritize hydrating the boundaries the user interacts with. (GitHub) That is, you don't need to wait for the whole page to be fully hydrated - React can start hydrating important elements earlier so they become interactive faster. 3. Integration with the streaming architecture (Streaming SSR + Suspense) Hydration in React 18 is tightly linked to the server's streaming mechanism and Suspense. The server can send parts of the HTML gradually, and the client can hydrate "parts" as they become ready and are interacted with. This reduces the startup load and makes the interface available faster. (React) 4. More flexible client-server reconciliation during hydration React 18 pays more attention to making sure the HTML structure, state, and effects restored on the client match the server render. This reduces the chance of a "Mismatch Warning" (when the client render differs from the server one). (React) React can also more gracefully correct small discrepancies without hard failures. 5. Hydration by priority / concurrency Since React 18 uses the Concurrent Rendering model, hydration also "lives" within that model: React can pause, switch between hydration tasks, and re-evaluate priority if the user interacts with a part of the UI that's already hydrated. This makes hydration less "blocking" for the user.

---

#Consequences for developers

• You need to update hydration calls to hydrateRoot to take advantage of the new capabilities.
• Make sure the server HTML matches the client render as closely as possible - React now handles mismatches better, but they can still trigger warnings.
• Using Suspense and splitting the interface into boundaries helps React hydrate "important" parts sooner.
• Don't rely on the whole interface becoming interactive at once - it's better to design components with gradual hydration in mind.