レンタリングとは、Reactコンポーネントの関数本体を実行して、画面に表示するための「仮想 DOM」を生成し、最終的にブラウザのDOMに反映する一連の処理のことです。
Reactのレンダリングは大きく分けて「初回レンダリング」と「更新レンダリング」の２フェーズで動いていて、その背後では“仮想 DOM”と“差分アルゴリズム” が働いています。
初回レンタリング
以下の流れで実行されます。
- コンポーネント呼び出し
・ReactDOM.createRoot(...).render() が最初に呼ばれる
・App（関数コンポーネント）の本体が一度だけ実行される - 仮想 DOM の構築
・JSX から JS オブジェクト形式のノードツリーを作成 - 差分検出とコミット
・空の DOM と比較して差分（パッチ）を作成
・実際の DOM に必要最小限の要素を追加して画面に表示
結果：画面が初めて描画され、ユーザーに UI が見える状態になる
更新レンタリング
State や Props の変更などをトリガーに再度レンダリングが走る流れです。
主なトリガー
・Stateの更新
useState／useReducerなどで状態を更新したとき
例：setCount(count + 1)
・Propsの変更
親コンポーネントが渡す値 () が変わったとき
・Contextの更新
Context.Providerのvalue が変わったとき
以下の流れで実行されます。
-
再コンポーネント実行
変更を受けたコンポーネント（と必要なら子孫）がもう一度関数として実行される
⇒ 関数の先頭から末尾まで最新の値で再評価 -
新しい仮想 DOM の生成
初回と同じ仕組みで、新しいツリーを作る -
差分検出
・旧仮想DOMと新仮想DOMを比較
・何が追加・更新・削除されたかをマークする -
コミット（Commit）
・差分だけを実際のDOMに反映
・useLayoutEffect → DOM 操作や計測
・useEffect → 非同期的な副作用処理
結果：画面が最新の状態に更新され、必要最小限のDOM操作で高速に再描画される