再レンダリングの地図

なぜ「再レンダリング」を触って学ぶのか

React の再 render は抽象概念です。「親が state を変えると子が再 render される」 というルール自体は覚えやすい一方、どこまで止まるか・どこが実際に DOM 反映か は、 紙面では追い切れません。memo を付けたのに止まらない、Context で全部再 render されて驚く、 派生 state でループを作ってしまう — こうした鬼門は、木が光る様子を見るのが最短です。

稽古 と 道場 の違い

• 稽古（Tutorial） — 全 6 ステップ。木の伝播 → memo → object literal → Context → 派生 state → commit の違いを順に体験します。初見ならこちらから。
• 道場（Playground） — 深さ・枝分かれ（fanout）・memo・prop 種別を自由に組み合わせて、自分の実務コードに近い構造を再現できる実験場です。

可視化の仕組み

• 各ノードが render されるたびに 一瞬 flash します
• カウンタで 総 render 回数 と ノード別の render 回数 を表示します
• MutationObserver で DOM mutation 件数 も並置し、「render = DOM 変更」ではないことを体感できます

前提

• 本 Lab は Chromium 依存 API を使わないため、主要ブラウザ（Chrome / Firefox / Safari / Edge）で動作します
• 実務コードで同じ挙動を再現したいときは、ブラウザ拡張の React DevTools の Profiler が最短の確認手段です。本 Lab と併用すると理解が深まります
• Lab 1（レンダリングパイプライン）で「1 フレームの中身」を押さえたあとに見ると効きが良くなります

参考

• React docs — memo
• React docs — You Might Not Need an Effect