jotaiの中身を読む

状態管理ライブラリ jotaiの中身を読んで何が起こっているかを理解する

一番単純な下記のようなケースで何が起こるか見る

import { atom } from "jotai";

const countAtom = atom(0);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>one up</button>
    </>
  );
};

nakaakist

atomは、主にreadとwriteをプロパティとして持つオブジェクト。
readとwriteは、それぞれ値を読み書きするシンプルな処理だが、getやsetの関数を引数に取る形になっている

nakaakist

Reactコンポーネントの中で呼ばれるuseAtomは、useAtomValueとuseSetAtomの糖衣構文のような感じで、実際の処理はuseAtomValueとuseSetAtomで行っている。

まずはuseAtomValueの方を見てみる

nakaakist

useAtomValueでは、下記処理を行っている

jotaiの状態を保存しておくコアである、storeを取得する。
- https://github.com/pmndrs/jotai/blob/main/src/react/useAtomValue.ts#L58
atomのvalueを取得して返す
- https://github.com/pmndrs/jotai/blob/main/src/react/useAtomValue.ts#L81
atomの変更を監視し、変更があったらコンポーネントを再レンダリングする
- https://github.com/pmndrs/jotai/blob/main/src/react/useAtomValue.ts#L89

nakaakist

storeの処理を見ていく

コンポーネント内でuseAtomValueが呼ばれるとstoreが作られるが、この実体は下記のdefaultStore変数。

これは、get, set, subの3つの関数のプロパティを持つオブジェクト。

get
- atomを引数に取り、そのvalueを返す
- https://github.com/pmndrs/jotai/blob/main/src/vanilla/store.ts#L404
set:
- atomと、そのatomにsetする値を引数に取り、atomに値をsetする
- https://github.com/pmndrs/jotai/blob/main/src/vanilla/store.ts#LL474C3-L474C3
sub:
- atomと、コールバック関数を引数に取り、atomの値が変化した時などにコールバック(listener)を実行できるようにする
- https://github.com/pmndrs/jotai/blob/main/src/vanilla/store.ts#L621
- listenerは、mountedという変数のlというフィールドに格納され、flushPendingという関数が実行された時に呼ばれる。
  - https://github.com/pmndrs/jotai/blob/main/src/vanilla/store.ts#LL609C1-L609C1