LoginSignup
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-30

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

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

公式ドキュメント

目次

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


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を更新します。


参考サイト

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


全目次

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0