Recoil公式ドキュメント 翻訳㉔ APIリファレンス-Core-Snapshots-useRecoilSnapshot()

Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。

追々追加していきます。(多分)

公式ドキュメント

目次

• 前書き　①　②　③　④
• 基本チュートリアル　⑤　⑥　⑦
• ガイド　⑧　⑨　⑩
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State　⑫　⑬　⑭　⑮　⑯　⑰　⑱　⑲　⑳　㉑
  
  •　Snapshots
  
  　・　㉒Snapshot
  
  　・　㉓useRecoilTransactionObserver()
  
  　・　㉔ useRecoilSnapshot()
  
  　・　㉕useGotoRecoilSnapshot()
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)　㉗
  
• 実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

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

---

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()