From 89166209835c8acb7b0edfa1097af741de41c4d9 Mon Sep 17 00:00:00 2001
From: flt3150sk <muranaka.kouske@gmail.com>
Date: Sat, 30 Aug 2025 10:48:48 +0900
Subject: [PATCH] docs: document lazy loading with React.lazy and Suspense

---
 README.md | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/README.md b/README.md
index 785ece8..fac30e5 100644
--- a/README.md
+++ b/README.md
@@ -96,6 +96,40 @@ const accepted = await Confirm.call({ message: 'Continue?' })
 
 Check out [the demo site](https://react-call.desko.dev/) to see some live examples of other React components being called.
 
+# Lazy loading
+
+Use React.lazy to code-split callable components and load them on demand.
+
+```tsx
+import { createCallable } from 'react-call'
+import { lazy, Suspense } from 'react'
+
+// 1) Lazy-load your component
+const Confirm = createCallable(
+  lazy(() => import('./Confirm')), // default export required
+)
+
+// 2) Place Root inside a Suspense boundary
+export function App() {
+  return (
+    <>
+      {/* Other app UI */}
+      <Suspense fallback={null}>
+        <Confirm.Root />
+      </Suspense>
+    </>
+  )
+}
+
+// 3) Call it as usual (component is fetched on first call)
+const accepted = await Confirm.call({ message: 'Continue?' })
+```
+
+Notes:
+- Make sure the lazily imported file has a default export (React.lazy requirement).
+- Wrap `<Confirm.Root />` (or an ancestor) in `<Suspense>` to handle the loading state.
+- The lazy component is split into a separate chunk and downloaded only when first called.
+
 # Advanced usage
 
 ## End from caller