🌳

Reactを最上位から常に再レンダリングする、できちゃうんですそんなことも、Jotaiならね

2023/03/02に公開

React

state

jotai

tech

みなさん、もう「React.js: The Documentary」はみましたか？

初期の思想が思い出せていいですね。そう、昔は、キータイプするだけでも、最上位から再レンダリングして良い思想だったはず。今は、局所的に再レンダリングしよう、に変わりましたが。

ところで、最上位から再レンダリングするのは "conceptually" だというのをよく耳にしたので、「本当に」最上位から再レンダリングするのをやってみました。

なぜ、こんなことができるかというと、JotaiのatomにJSXのelementを格納しているからです。Jotaiはatomの値をキャッシュするため、変更がなければキャッシュされたJSXのelementを返します。React(-DOM)はJSXのelementに変更がなければ、差分検知をスキップします。もちろんツリーの深さが深くなれば処理は増えますが、少なくとも線形にしか増えないので、再レンダリング（と差分検知）は最適化されているといえるでしょう。

再度コードも見てみましょう。

const countAtom = atom(0);

const Counter = comp(($) => (
  <div>
    {$(countAtom)}
    <button onClick={() => $(countAtom, (c) => c + 1)}>+1</button>
  </div>
));

const textAtom = atom("hello");

const TextBox = comp(($) => (
  <div>
    <input value={$(textAtom)} onChange={(e) => $(textAtom, e.target.value)} />
  </div>
));

const App = comp(($) => (
  <div>
    <h1>Jotai App</h1>
    <h2>This is a full Jotai app.</h2>
    {$(Counter)}
    {$(TextBox)}
  </div>
));

これでもれっきとしたReactです。まあ慣習とは違うので、React DevToolsにうまく表示されないとか、実際問題は色々あると思いますが。

（あれ？キャッシュしている時点で、最上位から再レンダリングと言えない？？ま、いいか）

Discussion