目次

※全目次は一番下にあります

useRecoilSnapshot()

このhookは、レンダリング中にSnapshotオブジェクトを同期的に返し、すべてのRecoil state変更の呼び出し元コンポーネントを登録します。このhookは、デバッグツールや、初期レンダリング中にstateを同期させる必要があるサーバサイドレンダリングに使用できます。

function useRecoilSnapshot(): Snapshot

このhookを使用すると、すべてのRecoil stateの変更に対してコンポーネントが再レンダリングされるため、注意が必要です。将来は、パフォーマンスのためにデバウンスする機能を提供したいと考えています。

Linkサンプルコード

<a>アンカーに変換が適用された現在の状態に基づいてhrefをレンダリングする<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>;
}

これは簡単な例です。私たちはこのようなヘルパーを提供して、より拡張性が高く最適化されたブラウザの履歴の永続性し、ライブラリーにリンクを生成します。たとえば、clickハンドラをハイジャックして、ブラウザの履歴を置き換えるローカルstateを更新します。

参考サイト

・公式ドキュメント
・みらい翻訳

全目次

前書き
①動機
②コアコンセプト
③インストール
④入門
基本チュートリアル
⑤概要
⑥Atoms
⑦Selectors
ガイド
⑧非同期データクエリ
⑨非同期状態・同期状態
⑩Stateの永続性
APIリファレンス
Core

•　⑪ <RecoilRoot />

•　State

　・　⑫atom()

　・　⑬selector()

　・　⑭Loadable

　・　⑮useRecoilState()

　・　⑯useRecoilValue()

　・　⑰useSetRecoilState()

　・　⑱useResetRecoilState()

　・　⑲useRecoilValueLoadable()

　・　⑳useRecoilStateLoadable()

　・　㉑isRecoilValue()

•　Snapshots

　・　㉒Snapshot

　・　㉓useRecoilTransactionObserver()

　・　㉔ useRecoilSnapshot()

　・　㉕useGotoRecoilSnapshot()

•　㉖useRecoilCallback()

•　雑録(Misc)

　・　㉗useRecoilBridgeAcrossReactRoots()
実用(utils)

•　㉘atomFamily()

•　㉙selectorFamily()

•　㉚constSelector()

•　㉛errorSelector()

•　㉜waitForAll()

•　㉝waitForAny()

•　㉞waitForNone()

•　㉟noWait()