Chapter 93: React DOM — Client Overview

Core Idea

The react-dom/client entry point is where a browser-rendered React app actually attaches to the page — its two APIs, createRoot and hydrateRoot, cover the two ways a React tree gets connected to real DOM nodes (fresh client-side rendering vs. taking over server-rendered HTML).

Key Concepts

• react-dom vs. react-dom/client: the base react-dom package holds the DOM-specific host components/props (<div>, <input>, etc. — Ch 96) and shared utilities (createPortal, flushSync); the /client subpath specifically holds the two root-creation APIs used to bootstrap a browser app.
• createRoot (Ch 94): for apps rendered entirely client-side, with no pre-existing server-rendered markup to reconcile with.
• hydrateRoot (Ch 95): for apps where the server already sent rendered HTML (SSR/SSG) and the client needs to attach event listeners and take over that existing markup rather than re-creating it from scratch.
• Both return a root object whose .render() method is called with the top-level JSX to display, and which most apps only ever call once (the framework or entry-point file), not something invoked repeatedly through app logic.

Key Takeaways

1. Reach for createRoot in a purely client-rendered app; reach for hydrateRoot whenever the server already produced the initial HTML.
2. This is almost always framework/entry-point boilerplate — most application code never touches these APIs directly beyond the initial setup.
3. react-dom's host-component/prop reference (Ch 96) is a separate concern from these two root-attachment APIs.

Connects To

• Ch 94 (createRoot) and Ch 95 (hydrateRoot): the two APIs this overview introduces.
• Ch 7 (Creating a React App): where a framework typically handles this wiring for you.