Add explicit children prop to useRecoilBridgeAcrossReactRoots() (#…

…1731)

Summary:
Pull Request resolved: #1731

Add explicit `children` prop to `useRecoilBridgeAcrossReactRoots_UNSTABLE()`, similar to `<RecoilRoot>` for TypeScript.  This aligns it with the Flow typing and is necessary for the new `types/react` for React 18.

Reviewed By: mondaychen

Differential Revision: D35599296

fbshipit-source-id: 699c2c06d5a3ac6ed3f64dda824c6290a2defc42

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Update typing for family parameters to better support Map, Set, and classes with `toJSON()`. (#1709, #1703)
 - Cleanup potential memory leak when using async selectors (#1714)
 - Fix potentially hung async selectors when shared across multiple roots that depend on atoms initialized with promises that don't resolve (#1714)
+- Add explict `children` prop to `<RecoilRoot>` and `useRecoilBridgeAcrossReactRoots_UNSTABLE()` for TypeScript for `@types/react` with React 18 (#1718, #1717, #1726, #1731)
 
 ## 0.7 (2022-03-31)
 

typescript/index.d.ts

@@ -308,7 +308,7 @@
  export function useRecoilRefresher_UNSTABLE(recoilValue: RecoilValue<any>): () => void;
 
  // useRecoilBridgeAcrossReactRoots.d.ts
- export const RecoilBridge: React.FC;
+ export const RecoilBridge: React.FC<{children: React.ReactNode}>;
  /**
   * Returns a component that acts like a <RecoilRoot> but shares the same store
   * as the current <RecoilRoot>.

typescript/tests.ts

@@ -406,9 +406,12 @@ const transact: (p: number) => void = useRecoilTransaction_UNSTABLE(({get, set,
  */
 {
   const RecoilBridgeComponent: typeof RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();
-  RecoilBridgeComponent({});
+  RecoilBridgeComponent({children: React.createElement('div')});
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  RecoilBridgeComponent({initializeState: () => {}}); // $ExpectError
+  RecoilBridgeComponent({
+    children: React.createElement('div'),
+    initializeState: () => {}, // $ExpectError
+  });
 }
 
 /**