Jotaiを使ってみて（Providerの要不要について）

こちらの記事は金属加工プラットフォームを開発・運用するCatallaxyのCatallaxy Advent Calendar 2022の12/16の記事となります。

思ってたんとちゃう

この記事ではJotaiを使って実装してみてなんとなくこうした方がいいんじゃないかというのをまとめてみます。
なので単純にJotaiの使い方を知りたい人には向かないかも。

Atomをexportしない

Atomをexportすると予期しないところから状態を操作されたり、値を取得されて使われるようになるので（この辺はこの記事で対応したやり方も含めて運用次第だとは思いますが）、カスタムフックから利用するようにして操作できる範囲を制限するようにしました。

Atomを操作するカスタムフックを作る

要はGetter、SetterみたいなものでAtomを操作するカスタムフックを作ります。

// exportしない
const foo = atom<number>(0);

// 取得するだけのカスタムフック
export const useGetFoo = () => {
  const val = useAtomValue(foo);
  return { val };
};

// インクリメントするだけのカスタムフック
export const useIncrementFoo = () => {
  const [val, setVal] = useAtom(foo);
  setVal(val + 1);
};

こうすると少なくとも不用意にAtomを操作されることは無くなります。
操作されるスコープ自体はシステム設計とかルールによってしまいますが、自由に操作されるよりはましになります。

Providerについて

Atomを操作されるスコープを制限したいなぁと思って調べていたらProviderのscopeにたどり着いたのですが、どうも想定とは違うようでライブラリ内でJotaiを使う場合にライブラリを使う側とバッティングしないようにしたりできるよ！みたいな事がGitHubのDiscussionに書かれていました。
https://github.com/pmndrs/jotai/discussions/384#discussioncomment-534100

A minor correction: The scope is for a different purpose. Even without scope, you can use multiple providers to provide different values for different sub trees (even nested).

うまく利用すると解決できるのかもしれませんが設計が思いついていません。。

その他のコメントによるとデバッグ目的での利用が考えられるとのこと。

You need Provider to see all values in the provider for debugging purpose.

あとは同じAtomを持つコンポーネントを複数使う場合はProviderを使う必要があるそうです。

<Provider>
  <Foo />
</Provider>

<Provider>
  <Foo />
</Provider>

これ以外のケースでは特にProviderを定義しなくてもいいようになっているようです。

最後に

まだ使い始めでわからないことが多いですがJotaiいいですね！