目次

前書き　①　②　③　④
基本チュートリアル　⑤　⑥　⑦
ガイド　⑧　⑨　⑩
APIリファレンス
Core

•　⑪ <RecoilRoot />

•　State　⑫　⑬　⑭　⑮　⑯　⑰　⑱　⑲　⑳　㉑

•　Snapshots　㉒　㉓　㉔　㉕

•　㉖ useRecoilCallback()

•　雑録(Misc)　㉗
実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

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

useRecoilCallback(callback, deps)

このhookはuseCallback()に似ていますが、コールバックがRecoil stateで動作するためのAPIも提供します。
このhookを使用すると、Recoil stateの読み取り専用のSnapshotへのアクセス権と、現在のRecoil stateを非同期に更新する機能を持つコールバックを構築できます。

このhookを使用する動機には、次のようなものがあります。

atomまたはselectorが更新された場合、Reactコンポーネントを登録せずにRecoil stateを非同期に読み取り、再描画します。
レンダリング時に実行したくない非同期アクションに対して高価な検索を延期します。
Recoil stateへの読み取りまたは書き込みを行う場合に、副作用を実行します。
レンダリング時に更新するatom、またはselectorがわからない可能性があるatom、またはselectorを動的に更新するため、useSetRecoilState()を使用できません。
レンダリング前にデータをプリフェッチしています。

type CallbackInterface = {
  snapshot: Snapshot,
  gotoSnapshot: Snapshot => void,
  set: <T>(RecoilState<T>, (T => T) | T) => void,
  reset: <T>(RecoilState<T>) => void,
};

function useRecoilCallback<Args, ReturnValue>(
  callback: CallbackInterface => (...Args) => ReturnValue,
  deps?: $ReadOnlyArray<mixed>,
): (...Args) => ReturnValue

コールバックインターフェース:

snapshot - Snapshotは、コールバックが呼び出された現在のトランザクションが開始されたときにReactバッチでコミットされたRecoil atomのstateを読み取り専用で表示します。atomの値は静的ですが、非同期selectorはまだ保留中または解決中の可能性があります。
gotoSnapshot - 指定されたSnapshotに一致するようにグローバルstateを更新するエンキューを行います。
set - atomまたはselectorの値を設定するエンキュー。他の場所と同様に、新しい値を直接指定することも、新しい値を返し、現在の値をパラメータとして受け取る更新関数を指定することもできます。現在の値は、現在のトランザクション内の他のすべてのエンキューされたstateの変更を表します。
reset - atomまたはselectorの値を既定値にリセットします。

遅延読み取りの例

この例では、**useRecoilCallback()**を使用して、stateが変化したときに再レンダリングするコンポーネントを登録せずに、stateを遅延読み込みします。

import {atom, useRecoilCallback} from 'recoil';

const itemsInCart = atom({
  key: 'itemsInCart',
  default: 0,
});

function CartInfoDebug() {
  const logCartItems = useRecoilCallback(({snapshot}) => async () => {
    const numItemsInCart = await snapshot.getPromise(itemsInCart);
    console.log('Items in cart: ', numItemsInCart);
  });

  return (
    <div>
      <button onClick={logCartItems}>Log Cart Items</button>
    </div>
  );
}

参考サイト

・公式ドキュメント
・useCallback()
・IT用語辞典 e-Words シグネチャ
・IT用語辞典 e-Words インスタンス
・IT用語辞典 e-Words トランザクション
・IT用語辞典 e-Words エンキュー
・useCallback
・みらい翻訳

全目次

前書き
①動機
②コアコンセプト
③インストール
④入門
基本チュートリアル
⑤概要
⑥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()