Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。
追々追加していきます。(多分)
目次
※全目次は一番下にあります
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
-
callback- コールバックインターフェースを提供するラッパー関数を持つユーザーコールバック関数。stateを変更するコールバックはキューに入れられ、現在のRecoil stateを非同期に更新します。ラップされた関数の型シグネチャは、返されたコールバックの型シグネチャと一致します。 -
deps- コールバックを記憶するための、オプションの依存関係のセット。useCallback()と同様に、生成されたコールバックはデフォルトでは記憶されず、レンダーのたびに新しい関数が生成されます。空の配列を渡すと、常に同じ関数インスタンスを返すことができます。deps配列に値を渡すと、depの参照の等価性が変更された場合に新しい関数が使用されます。これらの値は、コールバックの本体内から、古くならずに使用できます。(useCallbackを参照) eslintを更新して、これが正しく使用されるようにすることができます。
コールバックインターフェース:
-
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
・みらい翻訳
全目次
- 前書き
- 基本チュートリアル
- ガイド
- 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()