From a102ddcbb78a17c500bcf671ca9e6e5ae0e85704 Mon Sep 17 00:00:00 2001
From: Adit <ioExpander@users.noreply.github.com>
Date: Tue, 28 Nov 2023 18:46:39 +0100
Subject: [PATCH 1/2] Update initialize-atom-on-render.mdx

Added a Typescript example for useHydrateAtoms
---
 docs/guides/initialize-atom-on-render.mdx | 43 +++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/docs/guides/initialize-atom-on-render.mdx b/docs/guides/initialize-atom-on-render.mdx
index f496d29ef4..0624eceeb5 100644
--- a/docs/guides/initialize-atom-on-render.mdx
+++ b/docs/guides/initialize-atom-on-render.mdx
@@ -93,3 +93,46 @@ This behavior is due to our child components looking for the lowest commmon `Pro
 For more information on `Provider` behavior, please read the docs [here](../core/provider.mdx).
 
 For more complex use cases, check out [Scope extension](../extensions/scope.mdx).
+
+
+### Using Typescript
+
+`useHydrateAtoms` has overloaded types and typescript cannot extract types from overloaded function. It is recommended to use a `Map` when passing initial atom values to the `useHydrateAtoms`.
+
+Here is a working example :
+
+```jsx
+import { Provider, atom, useAtomValue, type WritableAtom } from "jotai";
+import { useHydrateAtoms } from "jotai/utils";
+import { type ReactNode } from "react";
+
+const testAtom = atom("");
+
+export default function JotaiTests() {
+  return (
+    <Provider>
+      <AtomsHydrator atomValues={[[testAtom, "hello"]]}>
+        <MyComponent />
+      </AtomsHydrator>
+    </Provider>
+  );
+}
+
+//This component contains all the states and the logic
+function MyComponent() {
+  const testAtomValue = useAtomValue(testAtom);
+  return <div>{testAtomValue}</div>;
+}
+
+function AtomsHydrator({
+  atomValues,
+  children,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  atomValues: Iterable<readonly [WritableAtom<unknown, [any], unknown>, unknown]>;
+  children: ReactNode;
+}) {
+  useHydrateAtoms(new Map(atomValues));
+  return children;
+}
+```

From f2fb0e473c06ddf6f3d32dbb02d003c3f2a66f08 Mon Sep 17 00:00:00 2001
From: Adit <ioExpander@users.noreply.github.com>
Date: Thu, 28 Dec 2023 09:09:57 +0000
Subject: [PATCH 2/2] run prettier and resolve comments

---
 docs/guides/initialize-atom-on-render.mdx | 38 ++++++++++++-----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/docs/guides/initialize-atom-on-render.mdx b/docs/guides/initialize-atom-on-render.mdx
index 0624eceeb5..8771356164 100644
--- a/docs/guides/initialize-atom-on-render.mdx
+++ b/docs/guides/initialize-atom-on-render.mdx
@@ -94,34 +94,34 @@ For more information on `Provider` behavior, please read the docs [here](../core
 
 For more complex use cases, check out [Scope extension](../extensions/scope.mdx).
 
-
 ### Using Typescript
 
 `useHydrateAtoms` has overloaded types and typescript cannot extract types from overloaded function. It is recommended to use a `Map` when passing initial atom values to the `useHydrateAtoms`.
 
-Here is a working example :
+Here is a working example:
 
-```jsx
-import { Provider, atom, useAtomValue, type WritableAtom } from "jotai";
-import { useHydrateAtoms } from "jotai/utils";
-import { type ReactNode } from "react";
+```tsx
+import type { ReactNode } from 'react'
+import { Provider, atom, useAtomValue } from 'jotai'
+import type { WritableAtom } from 'jotai'
+import { useHydrateAtoms } from 'jotai/utils'
 
-const testAtom = atom("");
+const testAtom = atom('')
 
-export default function JotaiTests() {
+export default function App() {
   return (
     <Provider>
-      <AtomsHydrator atomValues={[[testAtom, "hello"]]}>
-        <MyComponent />
+      <AtomsHydrator atomValues={[[testAtom, 'hello']]}>
+        <Component />
       </AtomsHydrator>
     </Provider>
-  );
+  )
 }
 
 //This component contains all the states and the logic
-function MyComponent() {
-  const testAtomValue = useAtomValue(testAtom);
-  return <div>{testAtomValue}</div>;
+function Component() {
+  const testAtomValue = useAtomValue(testAtom)
+  return <div>{testAtomValue}</div>
 }
 
 function AtomsHydrator({
@@ -129,10 +129,12 @@ function AtomsHydrator({
   children,
 }: {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  atomValues: Iterable<readonly [WritableAtom<unknown, [any], unknown>, unknown]>;
-  children: ReactNode;
+  atomValues: Iterable<
+    readonly [WritableAtom<unknown, [any], unknown>, unknown]
+  >
+  children: ReactNode
 }) {
-  useHydrateAtoms(new Map(atomValues));
-  return children;
+  useHydrateAtoms(new Map(atomValues))
+  return children
 }
 ```