Advanced React Interview QuestionsAdvancedComparison
React · Question 86
What is the difference between createRoot and hydrateRoot?
Direct answer
createRoot renders React into a client-owned DOM container, while hydrateRoot attaches React behavior to HTML that was already rendered on the server and is expected to match the client's initial output.
| Concern | createRoot | hydrateRoot |
|---|---|---|
| Starting DOM | Container is rendered by the client root | Contains server-rendered React HTML |
| Primary purpose | Client rendering | Hydration of server-rendered markup |
| Markup matching requirement | No server markup contract | Initial client output must match server HTML |
| Typical framework use | Pure client entry | SSR/streamed application entry |
Hydration is not simply 'render React again'. React attempts to attach event handling and component behavior to the existing server-generated structure.