useRecoilSnapshot()

このフックはレンダリング中に Snapshot オブジェクトを同期的に返し、呼び出しコンポーネントをすべてのリコイル状態変更のためにサブスクライブします。このフックは、デバッグツール、または初期レンダリング中に状態を同期的に取得する必要があるサーバー側レンダリングに使用できます。

function useRecoilSnapshot(): Snapshot

このフックを使用すると、すべてのリコイル状態変更に対してコンポーネントが再レンダリングされるため、注意して使用してください。useRecoilSnapshot() から取得したスナップショットは、それらを使用するコンポーネントがマウントされている間、少なくともその間保持されます。

デバッグ例

function DebugObserver() {
  const snapshot = useRecoilSnapshot();
  const previousSnapshot = usePrevious(snapshot);
  useEffect(() => {
    console.debug('Changed Atoms:');
    for (const node of snapshot.getNodes_UNSTABLE({isModified: true})) {
      console.debug(node.key, snapshot.getLoadable(node));
    }
  }, [snapshot]);
  return null;
}

function MyApp() {
  return (
    <RecoilRoot>
      <DebugObserver />
      ...
    </RecoilRoot>
  );
}

エラー境界の例

エラーをスローしたセレクタを見つけて、表示し、再試行するための、スナップショットを使用する「楽しいちょっとした例」があります。

リンクの例

現在の状態に基づいて、適用されたミューテーション付きで href の <a> アンカーを描画する <LinkToNewView> コンポーネントを定義します。この例では、uriFromSnapshot() は現在の状態を URI にエンコードする、ユーザー定義の関数であり、ページを読み込むときに復元できます。

function LinkToNewView() {
  const snapshot = useRecoilSnapshot();
  const newSnapshot = snapshot.map(({set}) => set(viewState, 'New View'));
  return <a href={uriFromSnapshot(newSnapshot)}>Click Me!</a>;
}

これは簡略化された例です。近日公開予定のブラウザ履歴永続化ライブラリでリンクを生成するために、これのようなヘルパーを提供します。これは、より拡張性があり、最適化されています。たとえば、クリックハンドラーをハイジャックしてローカル状態を更新し、ブラウザ履歴を置き換えます。