<RecoilRoot>

atomに値を持たせるコンテキストを提供します。Recoilフックを使用するコンポーネントのすべての上位コンポーネントである必要があります。

---

プロップ

• initializeState?: (MutableSnapshot => void)
  • <RecoilRoot>atomの状態を初期化するためのMutableSnapshotを受け取るオプションの関数です。これにより最初のレンダリングの状態が設定され、後続の状態の変更や非同期初期化には使用されません。非同期状態の変更にはuseSetRecoilState()やuseRecoilCallback()などのフックを使用してください。atomエフェクトは、動的atomのより簡単な初期化とatomの定義と初期化ロジックの共配置に使用できます.atomエフェクトの初期化はinitializeStateよりも優先されます。
• override?: boolean
  • デフォルトはtrueです。このプロップは、この<RecoilRoot>が別の<RecoilRoot>内にネストされている場合にのみ関係します。overrideがtrueの場合、このルートは新しいRecoilスコープを作成します。overrideがfalseの場合、この<RecoilRoot>は子のみをレンダリングする以外の機能を実行しません。つまり、このルートの子は最も近い祖先のRecoilRootのRecoil値にアクセスします。

複数の<RecoilRoot>の使用

複数の<RecoilRoot>が共存して、atom状態の独立したプロバイダー/ストアを表す場合があります。atomは各ルート内で異なる値を持ちます。この動作は、あるルートを別のルート内にネストしたときでも同じです（内側のルートは外側のルートをマスクします）。ただし、overrideをfalseと指定した場合を除きます（「プロップ」を参照）。

セレクターのキャッシュなどのキャッシュは、ルート間で共有する可能性があることに注意してください。キャッシュやロギングを除いて、セレクターの評価はべき等である必要があります。そのため、通常は問題になりませんが、観察可能であり、ルート間で冗長なクエリがキャッシュされる可能性があります。キャッシュは、useRecoilRefresher_UNSTABLE() を使用してクリアできます。

例

import {RecoilRoot} from 'recoil';

function AppRoot() {
  return (
    <RecoilRoot>
      <ComponentThatUsesRecoil />
    </RecoilRoot>
  );
}