<h2 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
Reactを触っていて、レンダリングのトリガーと最適化の方法については意識しているが、正直Reactのレンダリングの仕組みについてはあまり考えることがなく、仮想DOMを生成しているんでしょ？くらいの知識でした。 
Reactのレンダリング＝ブラウザのレンダリングだと思っていましたが、実は違うみたい... 
今回はReactのレンダリングについてざっとまとめてみようと思います。ほんとにざっとです。かなり深そうなので。
<h2 id="%E5%89%8D%E6%8F%90%E7%9F%A5%E8%AD%98">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90%E7%9F%A5%E8%AD%98" aria-hidden="true"></a> 前提知識</h2>
<h3 id="dom%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#dom%E3%81%A8%E3%81%AF" aria-hidden="true"></a> DOMとは</h3>
<code>DOM（Document Object Model）</code>とはWebページの構造を表すオブジェクトのツリー構造のことでHTMLやXMLなどの文書を、プログラムから扱いやすくするために標準化されたものです。 
DOMは、Webページ全体の構造をツリー状（木構造）に表現し、最上位の要素は<code>document</code>となっています。 
例えば以下のようなHTMLの場合、
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;HogeTitle&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;HogeH1&lt;/h1&gt;
 &lt;p&gt;HogeP&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>DOMはこんな感じになります
<div class="code-block-container"><pre><code>document
 - html
 - head
 - title
 - "HogeTitle"
 - body
 - h1
 - "HogeH1"
 - p
 - "HogeP"
</code></pre></div><h2 id="react%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E3%83%88%E3%83%AA%E3%82%AC%E3%83%BC">
<a class="header-anchor-link" href="#react%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E3%83%88%E3%83%AA%E3%82%AC%E3%83%BC" aria-hidden="true"></a> Reactのレンダリングのトリガー</h2>
Stateが更新された時、親コンポーネントがレンダリングされた時、Propsの値が変化した時などが挙げられます。memoやuseCallBackで最適化することができます。
<h2 id="react%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%EF%BC%9D%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#react%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%EF%BC%9D%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84" aria-hidden="true"></a> Reactのレンダリング＝ブラウザのレンダリングではない</h2>
僕が誤認識していたことですが、トリガー（stateの変化など）によって、レンダリングが発生した際、ブラウザがレンダリングされていると思っていましたが、正確にはReactのレンダリングとブラウザのレンダリングは別物であるらしいです。 
いや別物というか最終的にはブラウザもレンダリングされることがありますが、Reactが指しているレンダリングとブラウザレンダリングは役割が違うというイメージです。
<aside class="msg alert">!<div class="msg-content">
今回ブラウザレンダリングの仕組みに関しては結構深くてこの記事では手に負えないので詳細は割愛させていただきます。 
あくまでReactが指すレンダリングについて僕の解釈となっています。
</div></aside>
<h3 id="react%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0">
<a class="header-anchor-link" href="#react%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0" aria-hidden="true"></a> Reactのレンダリング</h3>
Reactのレンダリングのステップは大きく分けて以下のような順番になります。
<blockquote>
1.Trigger 
2.Render 
3.Commit
</blockquote>
<h4 id="trigger">
<a class="header-anchor-link" href="#trigger" aria-hidden="true"></a> Trigger</h4>
<code>Trigger</code>でまずレンダリングのトリガーを検知します。 トリガーとは初回レンダリングも含めて、再レンダリングが発生するあらゆるトリガーを検知します。
<h4 id="render">
<a class="header-anchor-link" href="#render" aria-hidden="true"></a> Render</h4>
ここがReactのレンダリングで一番重要なステップとなります。<code>Render</code>とあるようにレンダリングをします。が... 
このレンダリング（Render）という言葉が誤解を招きます。 ここで行っているレンダリングはブラウザのレンダリングではなく、コンポーネントを呼び出して、 大きく分けると以下のことを行っています。 
1.仮想DOMの構築 
2.レンダリングの比較 
3.レンダリングの最適化
ここでも<code>レンダリング</code>というワードが出てきておかしくなりますが、ここでのレンダリングは、「コンポーネントを呼び出して状態を読むこと」 と僕は解釈しています。
そしてReactにおけるレンダリングとはこの三つのプロセスを行うことになります
<h5>①仮想DOMの構築</h5>
コンポーネントがレンダリング（呼び出し）されるとReactはそのコンポーネントの<code>仮想DOM</code>を構築します。 
仮想DOMとは通常のDOMとは異なり、実態はReactが管理するJavaScriptのオブジェクトです。 
例えば以下のような、コンポーネントがあるとします。
<div class="code-block-container"><pre class="language-js"><code class="language-js">import React, { useState } from 'react';

const Counter = () =&gt; {
 const [count, setCount] = useState(0);
 
 const handleClick = () =&gt; {
 setCount((preCount) =&gt; preCount + 1);
 }
 
 return (
 &lt;div&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;button onClick={handleClick}&gt;Countに加算&lt;/button&gt;
 &lt;/div&gt;
 );
}
</code></pre></div>このコンポーネントでReactが構築する仮想DOM（JSのオブジェクト）は多分以下のようになります。
<div class="code-block-container"><pre class="language-js"><code class="language-js">{
 type: 'div',
 props: {
 children: [
 {
 type: 'p',
 props: {
 children: 'Count: 0'
 }
 },
 {
 type: 'button',
 props: {
 children: 'Countに加算',
 onClick: handleClick
 }
 }
 ]
 }
}
</code></pre></div><h5>②レンダリングの比較</h5>
仮想DOMが構築されるとReactは前回（一個前）の状態と比較を行います。（diffをとる） 
例えば「Countに加算」というボタンが押されて<code>state</code>が更新されCountが1になった場合は仮想DOMは以下のように変更されます。
<div class="code-block-container"><pre class="language-js"><code class="language-js">{
 type: 'div',
 props: {
 children: [
 {
 type: 'p',
 props: {
 children: 'Count: 1' // ← ここが変更された部分
 }
 },
 {
 type: 'button',
 props: {
 children: 'Countに加算',
 onClick: handleClick
 }
 }
 ]
 }
}
</code></pre></div>stateが変化し
<div class="code-block-container"><pre><code>children: 'Count: 0'
</code></pre></div>が
<div class="code-block-container"><pre><code>children: 'Count: 1'
</code></pre></div>となっていることを検知します。
<h5>③レンダリングの最適化</h5>
Reactはパフォーマンスの観点で不要なレンダリングを防ぐため（ここでのレンダリングはブラウザレンダリングと捉える）、もしstateやpropsなどが変化しておらず、②レンダリングの比較でdiffが検知されなかった場合、ブラウザのレンダリングを行いません。（Commitを行わない）
もし状態の変化が検知されると、Reactはその差分のみを<code>Commit</code>します。 この<code>Commit</code>がいわゆる<code>ブラウザレンダリング</code>に当たります。
ここまでを整理するとReactのレンダリングとは、Reactのレンダリングは前回との状態の差分を比較して、ブラウザレンダリング（Commit）をするかを判定すること と言えます。
参考 
<a href="https://beta.reactjs.org/learn/render-and-commit#epilogue-browser-paint" target="_blank" rel="nofollow noopener noreferrer">React公式</a> 
<a href="https://zenn.dev/1129_tametame/articles/bf4fc2005bea4d" target="_blank">Reactのレンダリングを理解する</a>

Reactのレンダリングてどうなってんの？ていう話

Reactのレンダリングのトリガー

Reactのレンダリング＝ブラウザのレンダリングではない

Discussion