React入門 練習問題 55：レンダリングの仕組み
Reactにおける「ハイドレーション（Hydration）」という用語の説明として正しいものはどれか。
- サーバーで生成された静的なHTMLに、後からイベントハンドラ等をアタッチして対話的にする処理
- コンポーネントの状態が更新された際に、画面上の変更が必要な部分だけを効率的に再描画する処理
- 複数の状態更新リクエストを一つにまとめ、不必要なレンダリングの回数を減らして最適化する処理
- 開発環境でのみ動作し、非推奨のAPIや予期せぬ副作用がないかを自動的に検知して警告を出す処理
- 不要になったDOM要素やメモリ上の不要なデータをガベージコレクションによって破棄・解放する処理
正解と解説を見る
正解：サーバーで生成された静的なHTMLに、後からイベントハンドラ等をアタッチして対話的にする処理
ハイドレーション（Hydration）とは、サーバー側で出力された静的なHTMLに対して、後からクライアント側でイベントハンドラを付与して動的にする処理のことです。
【正解の理由】
Next.jsなどのサーバーサイドレンダリング（SSR）環境において、初期表示を速くするためにまず静的なHTMLを描画し、その後JavaScriptを読み込んでReactの制御下に置くプロセスを「水分を補給する」という意味でハイドレーションと呼びます。
【不正解の理由】
• 「画面上の変更が必要な部分だけを効率的に再描画する処理」という説明は誤り。これは差分レンダリング（Reconciliation）の説明です。
• 「複数の状態更新リクエストを一つにまとめ、最適化する処理」という説明は誤り。これは自動バッチング（Automatic Batching）の説明です。
• 「非推奨のAPIや予期せぬ副作用がないかを自動的に検知する処理」という説明は誤り。これはStrictMode（厳格モード）の役割です。
• 「不要なDOM要素やデータをガベージコレクションによって破棄する処理」という説明は誤り。これはJavaScriptエンジン自体のメモリ管理の仕組みです。