この記事では、私がuseStateや仮想DOMついて学習した内容を、自分の理解のためにも、発信してます。間違ってたりしたら教えてください。
そもそもstateとは
state（ステート）＝「コンポーネントが今どういう状態にあるか」を表す変数
であります。
Reactのコンポーネントって、「入力（props）」と「状態（state）」から「見た目（JSX）」を作り出す仕組みになっています。
props → 外から渡される値（親コンポーネントから）
state → コンポーネント自身の中で持っている「変化するデータ」
普通の変数なら下記のように書けますよね
//JavaScript//
let count = 0;
count = count + 1;
console.log(count); // 1
でもReactのコンポーネントは「UIと変数を同期してくれる」特殊な世界なので、
単なる変数を変えてもReactは「UIを更新する必要がある」と気づかないんです。
なので、useStateを使うと、Reactに「この値はUIに関係する状態だから、変わったら再描画してね」と伝えられます。
なので、useStateを使って、「今の値」と「値を更新して再レンダリングを依頼する関数」を定義します。
Reactのレンダリングの流れ
先ほど述べたように、Reactコンポーネントは基本的に「state（状態）やprops（外部からの値）」に基づいてUIを描画します。
流れとしては、以下の通りです。
1 : stateやpropsが変化する
2 : Reactがそのコンポーネントの関数をもう一度呼び出す（再レンダリング）
3 : その結果のJSXをもとに新しい仮想DOM（Virtual DOM）ツリーを作る
4 : Reactが前回の仮想DOMとの差分（diff）を計算して、実際のDOMを最小限更新する→これによりメモリは消費するが、動作が早い
つまり、「stateやpropsが変わる」＝「レンダリング（再評価）トリガー」がかかる、という仕組みなんです。
よくある誤解
「仮想DOMの値が変わればReactが勝手にレンダリングしてくれる」
これは間違い
仮想DOMは、あくまで「Reactがレンダリング時に作る一時的なオブジェクトツリー」であり、
React自体は「いつ再レンダリングするか」をstateやpropsの変更をトリガーに判断しています。