useRecoilBridgeAcrossReactRoots 関数

ネストされた React ルートとレンダラーを使用して Recoil 状態をつなぐときに役立つフックです。

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

ReactDOM.render() を使用してネストされた React ルートが作成されたり、ネストされたカスタムレンダラーが使用されたりする場合、React はコンテキストの状態を子のルートに伝達しません。このフックは、Recoil 状態を「ブリッジ」してネストされた React ルートと共有したい場合に役立ちます。このフックは <RecoilRoot> の代わりにネストされた React ルートで使用できる React コンポーネントを返します。これにより、同じ一貫した Recoil ストアの状態を共有できます。React ルートのすべての状態で状態を共有する場合と同様に、すべてのケースで変更が完全に同期されるわけではありません。

例

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

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

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

例​

例