hydrateRoot

Kind: Function

Source: src/jsx/dom/client.ts

Part of: Jsx

Create a root object and hydrate app to the target element. In hono/jsx/dom, hydrate is equivalent to render.

hydrateRoot creates a root object for a target DOM element and hydrates the application into that element. In hono/jsx/dom, hydration follows the same rendering behavior as render, connecting JSX output to the existing target container.

Signature

ts
function hydrateRoot(element: HTMLElement | DocumentFragment, reactNode: Child, options: RootOptions): Root

Parameters

Returns: Root

Diagram

mermaid
graph LR
  App[JSX application] --> Hydrate[hydrateRoot]
  Target[Target DOM element] --> Hydrate
  Hydrate --> Root[Root object]
  Root --> DOM[Rendered DOM]

Usage

tsx
import { hydrateRoot } from 'hono/jsx/dom/client'
import { App } from './app'

const container = document.getElementById('app')

if (container) {
  hydrateRoot(container, <App />)
}

AI Coding Instructions

• Pass the DOM element that should contain the application as the first argument.
• Pass the application JSX node as the second argument.
• Keep client entry code responsible for locating the target element before calling hydrateRoot.
• Treat hydration in hono/jsx/dom the same way as rendering when integrating application startup code.