目次

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

useRecoilBridgeAcrossReactRoots()

このhookは、ネストされたReact rootとレンダラーでRecoil stateをブリッジするのに役立ちます。

function useRecoilBridgeAcrossReactRoots_UNSTABLE():
  React.AbstractComponent<{children: React.Node}>;

ネストされたReact rootがReactDOM.render()で作成された場合、またはネストされたカスタムレンダラーが使用された場合、Reactはコンテキストのstateを子ルートに伝播しません。このhookは、"bridge"とReact rootがネストされたRecoil stateを共有する場合に便利です。hookはReactコンポーネントを返します。このコンポーネントは、ネストされたReact rootの代わりに使用して、同じ一貫性のあるRecoil store stateを共有できます。Reactのルート間でstateを共有する場合と同様に、すべてのケースで変更が完全に同期されるとは限りません。

サンプルコード

function Bridge() {
  const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();

  return (
    <CustomRenderer>
      <RecoilBridge>
        ...
      </RecoilBridge>
    </CustomRenderer>
  );
}

function MyApp() {
  return (
    <RecoilRoot>
      ...
      <Bridge />
    </RecoilRoot>
  );
}

参考サイト

・公式ドキュメント
・IT用語辞典 e-Words レンダラー
・IT用語辞典 e-Words ブリッジ
・みらい翻訳

全目次

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