[Next.js] MutableRefObjectをRecoilでグローバル状態管理する方法

Productionでのご使用は自己責任でお願い致します。

はじめに

最近、共通MutableRefObjectをグローバルで管理する必要があったので調べてみました。

atomにuseRefで作成したrefをそのまま渡す事は出来ないみたいので、以下のアプローチになります。

※ 通常はrecoilのsetter関数での更新が推奨なので、そもそもこれを利用するケースは殆ど無いかと思います。

ref用のatomを追加

ここではfooRefAtomとしています。

export const fooRefAtom = atom({
    key: 'bar',
    default: null,
    dangerouslyAllowMutability: true, // オブジェクトのフリーズを解除
});

オブジェクトのフリーズを解除することで、プロパティの更新・拡張が行えるようになります。

コンポーネントへの渡し方

...
// コンポーネント内
const [ fooRef, setFooRef ] = useRecoilState(fooRefAtom)

// fooRefAtomの更新関数のsetFooRefがそのまま渡せる
return (<Bar ref={setFooRef} />)

型定義の追加

atomに対象のMutableRefObjectが持つ型そのままを渡せば完了です。

// 対象のrefが持つ型
type DefaultFooRef = BarRef | null

// ここでatomの型を指定
export const fooRefAtom = atom<DefaultFooRef>({
   key: 'bar',
   default: null,
   dangerouslyAllowMutability: true, // オブジェクトのフリーズを解除
});

まとめ

MutableRefObjectをRecoilでグローバル状態管理する方法を紹介しました。
冒頭でも書きましたが、通常の利用所が有るかはわからないので、
検証目的の利用がいいかもしれないです。

参考文献