1年目エンジニア「すみません、仮想DOMってなんですか？」僕「...」

ってなりたくなかったので調べました
next.jsでコーディングしてると良く目にするワードですが、知らなくてもコーディングはできたしなんだか難しそうだったので放置してしまってました...。

仮想DOMって何？

実際のDOM（HTMLの要素ツリー）を軽量化したJavaScriptオブジェクトとしてメモリ上で管理したものです。

next.jsで下記のようなコードを書いたとすると

function Modal({ isOpen }) {
  return (
    <div className="modal">
      {isOpen && <div className="modal-content">This is a modal</div>}
    </div>
  );
}

仮想DOMは下記にようにメモリに保存されます。（状態が変更されたら生成される）

{
  type: "div",
  props: {
    className: "modal",
    children: [
      {
        type: "div",
        props: {
          className: "modal-content",
          children: ["This is a modal"]
        }
      }
    ]
  }
}

なんのために仮想DOMがある？

DOMの一部だけを更新してパフォーマンスを上げるためです。

どういう仕組み？

先ほどのコード例で説明します

isOpenフラグがtrueになって状態が変化すると

変更前と後の仮想DOMが生成されます
その差分をチェックして、差分のところのみをレンダリングして実際のDOMに反映させてるわけです

こうすることで余計なDOMの更新をかけなくて済むので素早く更新をかけることができます

Next.js学びたての時に自分がやりがちだったミス

const button = document.getElementById('incrementButton');
button.style.backgroundColor = 'lightblue';

HTMLやCSSのコーディングに慣れている人は
上記のようにリアルDOMの方を操作しようしてしまいがちです。

Reactが管理する仮想DOMとの整合性が取れなくなり、予期しない動作が発生します。
また、差分計算が効かず、最適化された更新が行われなくなるためパフォーマンス低下を引き起こす可能性もあります。

useStateやuseRefを使用して、仮想DOMの方を操作するようにしましょう。