Reactを捨てずにReactランタイムを捨てる — Vidact
Vidactは書いたReactコンポーネントをDOM直操作へコンパイルする。仮想DOMもReactランタイムも実行時には残らない。
#なぜ今日これを選んだか
自分は普段Reactを書いているが、「Reactが実行時に何をしているか」を説明できるかというと怪しい。Vidactは、同じJSXから仮想DOMを一切使わないコードを吐く。つまりReactの記法とReactの実行モデルは切り離せる、という証明になっている。使う道具の輪郭が見える記事だったので選んだ。
#要点
- Vidactは React コンポーネントをコンパイル時に解析し、DOMを直接操作するコードへ変換する。仮想DOMの差分計算が実行時から消える
- ランタイムを同梱しないのでバンドルが小さくなり、初期表示の負荷が下がる。書き味はReactのまま
- 一方でフックや動的な分岐など「実行時にしか分からない」部分はコンパイラが苦手とする領域で、対応範囲には制約が残る
#自分にとっての示唆
これはSvelteやSolidが先に示した「コンパイラ側に寄せる」流れの延長で、Vidact自体を今すぐ採用する話ではない。ただ、この記事の価値は選択肢が増えたことではなく、Reactを「宣言的な記法」と「差分更新の実行モデル」の2層に分けて見る視点が手に入ることにある。この分解ができると、パフォーマンス問題が起きたときに「再レンダリングが多いのか、DOM操作自体が重いのか」を切り分けて話せる。外資の面接で問われるのはまさにこの層の言語化だと思う。
明日からの一手として、自分が触っているReactアプリで一番重い画面をProfilerで測り、再レンダリング回数と実描画時間のどちらが支配的かを1つだけ数字で出す。道具の話をする前に、自分のアプリの実測値を1つ持っておく。