🌳

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

2023/03/02に公開

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

https://www.youtube.com/watch?v=8pDqJVdNa44

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

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

https://twitter.com/dai_shi/status/1626836804476493824

なぜ、こんなことができるかというと、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

ログインするとコメントできます