Reactを学んでいると、必ず出てくる言葉が**「レンダリング」**です。
でも、
何をもって「レンダリングされた」と言うのか
いつレンダリングが起きているのか
ここが曖昧なまま進んでしまう人も多いです。
この記事では、Reactにおけるレンダリングの意味を、できるだけ噛み砕いて解説します。
一言で言うと、Reactのレンダリングとは？
「画面に表示する内容を決め直す処理」
これがReactのレンダリングです。
Reactは
「今の状態（state）に応じて、画面はこうあるべき」
という判断を毎回行い、その結果を画面に反映します。
この「判断して画面を作り直す」一連の流れを、Reactではレンダリングと呼びます。
レンダリング＝DOMを全部書き換えている？
ここでよくある誤解があります。
レンダリングって、画面を全部描き直してるってこと？
答えは NO です。
Reactは毎回「画面の完成イメージ」を作りますが、
本当に変わった部分だけをDOMに反映します。
この仕組みを支えているのが、**Virtual DOM（仮想DOM）**です。
Reactのレンダリングの流れ（ざっくり）
Reactの内部では、こんな流れが起きています。
state や props が決まる
「この状態なら画面はこうなる」という設計図を作る
前回の設計図と比較する
差分だけを実際の画面に反映する
この 2〜4 の一連の処理をまとめて
「レンダリングが走る」と言います。
いつレンダリングは起きるのか？
Reactでレンダリングが起きる代表的なタイミングは次の3つです。
① state が更新されたとき
setCount(count + 1)
このように setState 系の関数を呼ぶと、
「状態が変わった → 画面を作り直そう」となり、レンダリングが発生します。
② props が変わったとき
親コンポーネントから渡される値（props）が変わると、
それを使っている子コンポーネントも再レンダリングされます。
③ 親コンポーネントが再レンダリングされたとき
親がレンダリングされると、
その中にある子コンポーネントも基本的には再レンダリングされます
（※最適化しない限り）。
「レンダリング＝画面が変わる」ではない
ここも重要なポイントです。
レンダリングが走った = 見た目が必ず変わる
というわけではありません。
state は更新された
でも表示内容は前と同じ
この場合でも、Reactは一度レンダリングを行います。
ただし、差分がないのでDOMの更新は起きません。
よくある混乱ポイント
console.log が何回も出るのはなぜ？
const Component = () => {
console.log("render");
return <div>Hello</div>;
};
これが何回も表示されるのは、
そのたびにレンダリングが実行されているからです。
「ボタン1回押しただけなのに2回出た」
という場合もありますが、それはレンダリングの仕組みとして正常なケースも多いです。
レンダリングを理解すると何が嬉しい？
レンダリングの理解が進むと、次のようなことが腑に落ちます。
なぜこの処理が何度も呼ばれるのか
なぜ useEffect がこのタイミングで動くのか
なぜ state を直接書き換えてはいけないのか
なぜ無駄な処理を書くと重くなるのか
つまり、Reactの挙動が予測できるようになるということです。
まとめ
Reactのレンダリングとは
「今の状態をもとに画面をどうするか決め直す処理」
レンダリング＝DOMを全部描き直すわけではない
state / props / 親の再レンダリングで発生する
見た目が変わらなくてもレンダリングは起きる
レンダリングを理解すると、
Reactは「魔法のライブラリ」ではなく
ルール通りに動くUIエンジンだと分かってきます。
ここが見えてくると、Reactは一気に書きやすくなります。
