From 48cf468b36357d91d566eefe9e27cfa848acc499 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Sun, 1 Feb 2026 22:42:39 +0900
Subject: [PATCH 01/10] fix(react): Fix logics for setting storage keys

---
 packages/react/src/lazy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/lazy.ts b/packages/react/src/lazy.ts
index b8f814b88..4e694c370 100644
--- a/packages/react/src/lazy.ts
+++ b/packages/react/src/lazy.ts
@@ -59,7 +59,7 @@ export const createLazy =
       defaultOptions.onError?.({ error, load })
     }
 
-    const loadNoReturn = () => load().then(noop)
+    const loadNoReturn = Object.assign(() => load().then(noop), { toString: () => load.toString() })
     return Object.assign(
       originalLazy(() =>
         load().then(

From f5f813e52ca5755099ada955ac3bd1e6fcefe5d0 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Sun, 1 Feb 2026 22:45:46 +0900
Subject: [PATCH 02/10] test(react): Verify logics for getting storage key

---
 packages/react/src/lazy.spec.tsx | 33 ++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/react/src/lazy.spec.tsx b/packages/react/src/lazy.spec.tsx
index 6e991d555..366ba00e0 100644
--- a/packages/react/src/lazy.spec.tsx
+++ b/packages/react/src/lazy.spec.tsx
@@ -636,6 +636,39 @@ describe('lazy', () => {
       expect(mockReload).toHaveBeenCalledTimes(0)
     })
 
+    it('should use separate storage keys for different lazy components', async () => {
+      const lazy = createLazy(reloadOnError({ storage, reload: mockReload, retry: 1 }))
+      const mockImport = importCache.createImport({ failureCount: 10, failureDelay: 50, successDelay: 50 })
+
+      const Component1 = lazy(() => mockImport('/component-1'))
+      const Component2 = lazy(() => mockImport('/component-2'))
+
+      render(
+        <ErrorBoundary fallback={<div>error1</div>}>
+          <Component1 />
+        </ErrorBoundary>
+      )
+
+      await act(() => vi.advanceTimersByTimeAsync(50))
+      expect(screen.getByText('error1')).toBeInTheDocument()
+
+      await act(() => vi.advanceTimersByTimeAsync(1))
+      expect(mockReload).toHaveBeenCalledTimes(1)
+
+      // Component2 should still be able to retry (not affected by Component1's retry count)
+      render(
+        <ErrorBoundary fallback={<div>error2</div>}>
+          <Component2 />
+        </ErrorBoundary>
+      )
+
+      await act(() => vi.advanceTimersByTimeAsync(50))
+      expect(screen.getByText('error2')).toBeInTheDocument()
+
+      await act(() => vi.advanceTimersByTimeAsync(1))
+      expect(mockReload).toHaveBeenCalledTimes(2)
+    })
+
     it('should throw error when storage is not provided and window.sessionStorage does not exist', () => {
       const originalWindow = global.window
       // @ts-expect-error - intentionally removing window

From 03b9132c4f7f8fd0f6e04eaed167b5b1b8ad1904 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Sun, 1 Feb 2026 22:47:52 +0900
Subject: [PATCH 03/10] fix(react): Prevent NaN to kill lazy silently

---
 packages/react/src/lazy.spec.tsx | 7 +++----
 packages/react/src/lazy.ts       | 7 +++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/lazy.spec.tsx b/packages/react/src/lazy.spec.tsx
index 366ba00e0..ff38073fa 100644
--- a/packages/react/src/lazy.spec.tsx
+++ b/packages/react/src/lazy.spec.tsx
@@ -604,11 +604,10 @@ describe('lazy', () => {
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(screen.getByText('error')).toBeInTheDocument()
 
-      // Should remove invalid value, but currentRetryCount becomes NaN, so it won't retry
-      // This is the actual behavior - when NaN is found, it's removed but currentRetryCount is still NaN
-      expect(storage.getItem(loadFunction.toString())).toBeNull()
+      // Should remove invalid value and reset retry count to 0, so it retries normally
+      expect(storage.getItem(loadFunction.toString())).toBe('1')
       await act(() => vi.advanceTimersByTimeAsync(1))
-      expect(mockReload).toHaveBeenCalledTimes(0)
+      expect(mockReload).toHaveBeenCalledTimes(1)
     })
 
     it('should not reload when retry count exceeds limit', async () => {
diff --git a/packages/react/src/lazy.ts b/packages/react/src/lazy.ts
index 4e694c370..e586b4ed4 100644
--- a/packages/react/src/lazy.ts
+++ b/packages/react/src/lazy.ts
@@ -209,8 +209,11 @@ export const reloadOnError = ({
         const storedValue = reloadStorage.getItem(storageKey)
         if (storedValue) {
           const reloadCount = parseInt(storedValue, 10)
-          if (Number.isNaN(reloadCount)) reloadStorage.removeItem(storageKey)
-          currentRetryCount = reloadCount
+          if (Number.isNaN(reloadCount)) {
+            reloadStorage.removeItem(storageKey)
+          } else {
+            currentRetryCount = reloadCount
+          }
         }
       }
 

From 3239e8f0a834e0396e1d2fa8f4e53f75aef32b95 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Sun, 1 Feb 2026 22:49:10 +0900
Subject: [PATCH 04/10] fix(react): Fix return type of onError

---
 packages/react/src/lazy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/lazy.ts b/packages/react/src/lazy.ts
index e586b4ed4..9701c8482 100644
--- a/packages/react/src/lazy.ts
+++ b/packages/react/src/lazy.ts
@@ -3,7 +3,7 @@ import { noop } from './utils/noop'
 
 interface LazyOptions {
   onSuccess?: ({ load }: { load: () => Promise<void> }) => void
-  onError?: ({ error, load }: { error: unknown; load: () => Promise<void> }) => undefined
+  onError?: ({ error, load }: { error: unknown; load: () => Promise<void> }) => void
 }
 
 /**

From a5fd4575fe30cb43a63683c0ae4a22158b7e407d Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Sun, 1 Feb 2026 22:49:22 +0900
Subject: [PATCH 05/10] test(react): Fix typo in tc

---
 packages/react/src/lazy.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/lazy.spec.tsx b/packages/react/src/lazy.spec.tsx
index ff38073fa..5e6b30de7 100644
--- a/packages/react/src/lazy.spec.tsx
+++ b/packages/react/src/lazy.spec.tsx
@@ -349,7 +349,7 @@ describe('lazy', () => {
       expect(callOrder).toEqual(['individual', 'factory'])
     })
 
-    it('should execute default onSuccess first, then component onSuccess', async () => {
+    it('should execute component onSuccess first, then default onSuccess', async () => {
       const mockImport = importCache.createImport({ failureCount: 0, failureDelay: 50, successDelay: 100 })
       const callOrder: string[] = []
       const defaultOnSuccess = vi.fn().mockImplementation(() => {

From 8290ecf0d1dcc78991d81615717b05be22d4a447 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Sun, 1 Feb 2026 22:50:14 +0900
Subject: [PATCH 06/10] docs(react): Remove experimental in lazy

---
 docs/suspensive.org/src/content/en/docs/react/lazy.mdx | 6 ------
 docs/suspensive.org/src/content/ko/docs/react/lazy.mdx | 6 ------
 packages/react/src/lazy.ts                             | 6 ------
 3 files changed, 18 deletions(-)

diff --git a/docs/suspensive.org/src/content/en/docs/react/lazy.mdx b/docs/suspensive.org/src/content/en/docs/react/lazy.mdx
index a428b0a02..d62dae0b3 100644
--- a/docs/suspensive.org/src/content/en/docs/react/lazy.mdx
+++ b/docs/suspensive.org/src/content/en/docs/react/lazy.mdx
@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # lazy
 
-<Callout type='experimental'>
-
-`lazy` is an experimental feature, so this interface may change.
-
-</Callout>
-
 The `lazy` function is a wrapper around React's `lazy` function that provides callbacks for component loading success and failure. It allows you to execute custom logic when a component loads successfully or fails, providing better user experience and debugging capabilities.
 
 ### Preloading Components
diff --git a/docs/suspensive.org/src/content/ko/docs/react/lazy.mdx b/docs/suspensive.org/src/content/ko/docs/react/lazy.mdx
index 8ea6784a2..6b19cd81a 100644
--- a/docs/suspensive.org/src/content/ko/docs/react/lazy.mdx
+++ b/docs/suspensive.org/src/content/ko/docs/react/lazy.mdx
@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # lazy
 
-<Callout type='experimental'>
-
-`lazy`는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
-
-</Callout>
-
 `lazy` 함수는 React의 `lazy` 함수를 래핑하여 컴포넌트 로딩 성공과 실패에 대한 콜백을 제공합니다. 컴포넌트가 성공적으로 로드되거나 실패할 때 사용자 정의 로직을 실행할 수 있어 더 나은 사용자 경험과 디버깅을 제공합니다.
 
 ### 컴포넌트 사전 로딩
diff --git a/packages/react/src/lazy.ts b/packages/react/src/lazy.ts
index 9701c8482..f421a3149 100644
--- a/packages/react/src/lazy.ts
+++ b/packages/react/src/lazy.ts
@@ -11,8 +11,6 @@ interface LazyOptions {
  *
  * The default `lazy` export is equivalent to `createLazy({})`.
  *
- * @experimental This is experimental feature.
- *
  * @description
  * The created lazy function will execute individual callbacks first, then default callbacks.
  * For onSuccess: individual onSuccess → default onSuccess
@@ -82,8 +80,6 @@ export const createLazy =
  *
  * This is equivalent to `createLazy({})` - a lazy function with no default options.
  *
- * @experimental This is experimental feature.
- *
  * @example
  * ```tsx
  * import { lazy, Suspense } from '@suspensive/react'
@@ -165,8 +161,6 @@ interface ReloadOnErrorOptions extends LazyOptions {
 /**
  * Options for reloading page if the component fails to load.
  *
- * @experimental This is experimental feature.
- *
  * @example
  * ```tsx
  * import { createLazy, reloadOnError } from '@suspensive/react'

From b527806d8a3481f7efc3d6c3d8764940c66eb72c Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 3 Feb 2026 21:48:41 +0900
Subject: [PATCH 07/10] Create soft-fishes-warn.md

---
 .changeset/soft-fishes-warn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/soft-fishes-warn.md

diff --git a/.changeset/soft-fishes-warn.md b/.changeset/soft-fishes-warn.md
new file mode 100644
index 000000000..a8c71ed32
--- /dev/null
+++ b/.changeset/soft-fishes-warn.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": minor
+---
+
+feat(react): fix bugs in `lazy` and stabilize it

From 4d9264c1e6910b7f80fb9634b34d34bb7ba5c49e Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Tue, 3 Mar 2026 08:37:32 +0900
Subject: [PATCH 08/10] fix(react): Use load itself instrad assigning toString

---
 packages/react/src/lazy.ts | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/lazy.ts b/packages/react/src/lazy.ts
index f421a3149..320c941ac 100644
--- a/packages/react/src/lazy.ts
+++ b/packages/react/src/lazy.ts
@@ -1,9 +1,8 @@
 import { type ComponentType, type LazyExoticComponent, lazy as originalLazy } from 'react'
-import { noop } from './utils/noop'
 
 interface LazyOptions {
-  onSuccess?: ({ load }: { load: () => Promise<void> }) => void
-  onError?: ({ error, load }: { error: unknown; load: () => Promise<void> }) => void
+  onSuccess?: ({ load }: { load: () => Promise<{ default: ComponentType<any> }> }) => void
+  onError?: ({ error, load }: { error: unknown; load: () => Promise<{ default: ComponentType<any> }> }) => void
 }
 
 /**
@@ -45,33 +44,32 @@ export const createLazy =
     load: () => Promise<{ default: T }>,
     options?: LazyOptions
   ): LazyExoticComponent<T> & {
-    load: () => Promise<void>
+    load: () => Promise<{ default: T }>
   } => {
-    const composedOnSuccess = ({ load }: { load: () => Promise<void> }) => {
+    const composedOnSuccess = () => {
       options?.onSuccess?.({ load })
       defaultOptions.onSuccess?.({ load })
     }
 
-    const composedOnError = ({ error, load }: { error: unknown; load: () => Promise<void> }) => {
+    const composedOnError = (error: unknown) => {
       options?.onError?.({ error, load })
       defaultOptions.onError?.({ error, load })
     }
 
-    const loadNoReturn = Object.assign(() => load().then(noop), { toString: () => load.toString() })
     return Object.assign(
       originalLazy(() =>
         load().then(
           (loaded) => {
-            composedOnSuccess({ load: loadNoReturn })
+            composedOnSuccess()
             return loaded
           },
           (error: unknown) => {
-            composedOnError({ error: error, load: loadNoReturn })
+            composedOnError(error)
             throw error
           }
         )
       ),
-      { load: loadNoReturn }
+      { load }
     )
   }
 
@@ -117,7 +115,7 @@ export const createLazy =
  * ```
  *
  * @returns A lazy component with additional `load` method for preloading
- * @property {() => Promise<void>} load - Preloads the component without rendering it. Useful for prefetching components in the background.
+ * @property load - Preloads the component without rendering it. Useful for prefetching components in the background.
  */
 export const lazy = createLazy({})
 

From 1bdf9bd311a35d64b4b37f165d2ea08a136ff454 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 3 Mar 2026 13:57:49 +0900
Subject: [PATCH 09/10] refactor(lazy): update component type definitions to
 require 'x' prop

- Modified the `ImportCache` class to enforce that components must accept a prop `x` of type string.
- Updated all relevant tests to pass the `x` prop when rendering lazy-loaded components.
- Adjusted type definitions in `LazyOptions` to be more specific, enhancing type safety for lazy-loaded components.
---
 packages/react/src/lazy.spec.tsx | 80 +++++++++++++++++---------------
 packages/react/src/lazy.ts       | 22 ++++-----
 2 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/packages/react/src/lazy.spec.tsx b/packages/react/src/lazy.spec.tsx
index 5e6b30de7..e033c4ae3 100644
--- a/packages/react/src/lazy.spec.tsx
+++ b/packages/react/src/lazy.spec.tsx
@@ -23,11 +23,11 @@ class ImportCache {
 
   createImport(options: ImportOptions) {
     return vi
-      .fn<(path: string) => Promise<{ default: ComponentType<any> }>>()
+      .fn<(path: string) => Promise<{ default: ComponentType<{ x: string }> }>>()
       .mockImplementation((path: string) => this.import(path, options))
   }
 
-  private async import(path: string, options: ImportOptions): Promise<{ default: ComponentType<any> }> {
+  private async import(path: string, options: ImportOptions): Promise<{ default: ComponentType<{ x: string }> }> {
     const data = this.pathData.get(path) || { cache: null, attempt: 0, failureCount: 0 }
 
     if (data.cache) {
@@ -54,7 +54,7 @@ class ImportCache {
     path: string,
     attempt: number,
     { failureCount, failureDelay, successDelay }: ImportOptions
-  ): Promise<{ default: ComponentType<any> }> {
+  ): Promise<{ default: ComponentType<{ x: string }> }> {
     if (attempt < failureCount) {
       await sleep(failureDelay)
 
@@ -63,7 +63,13 @@ class ImportCache {
 
     await sleep(successDelay)
 
-    return { default: () => <div>Component from {path}</div> }
+    return {
+      default: ({ x }: { x: string }) => (
+        <div>
+          Component from {path} {x}
+        </div>
+      ),
+    }
   }
 
   clear() {
@@ -146,7 +152,7 @@ describe('lazy', () => {
           </button>
           {isShow ? (
             <Suspense fallback={<div>loading...</div>}>
-              <Component />
+              <Component x="test" />
             </Suspense>
           ) : (
             <div>not loaded</div>
@@ -179,21 +185,21 @@ describe('lazy', () => {
       const Component1 = lazy(() => mockImport('/cached-component1'))
       const Component2 = lazy(() => mockImport('/cached-component2'))
 
-      render(<Component1 />)
+      render(<Component1 x="test" />)
 
       expect(importCache.getAttempt('/cached-component1')).toBe(1)
       expect(importCache.isCached('/cached-component1')).toBe(false)
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(importCache.isCached('/cached-component1')).toBe(true)
 
-      render(<Component2 />)
+      render(<Component2 x="test" />)
 
       expect(importCache.getAttempt('/cached-component2')).toBe(1)
       expect(importCache.isCached('/cached-component2')).toBe(false)
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(importCache.isCached('/cached-component2')).toBe(true)
 
-      render(<Component1 />)
+      render(<Component1 x="test" />)
 
       expect(importCache.getAttempt('/cached-component1')).toBe(1)
       expect(importCache.isCached('/cached-component1')).toBe(true)
@@ -211,7 +217,7 @@ describe('lazy', () => {
       render(
         <ErrorBoundary fallback={<div>error</div>}>
           <Suspense fallback={<div>loading...</div>}>
-            <Component1 />
+            <Component1 x="test" />
           </Suspense>
         </ErrorBoundary>
       )
@@ -225,7 +231,7 @@ describe('lazy', () => {
       render(
         <ErrorBoundary fallback={<div>error</div>}>
           <Suspense fallback={<div>loading...</div>}>
-            <Component2 />
+            <Component2 x="test" />
           </Suspense>
         </ErrorBoundary>
       )
@@ -241,7 +247,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -258,7 +264,7 @@ describe('lazy', () => {
 
       const Component = lazy(() => mockImport('/test-component'))
 
-      render(<Component />)
+      render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
@@ -275,7 +281,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -293,7 +299,7 @@ describe('lazy', () => {
 
       const Component = lazy(() => mockImport('/test-component'), { onSuccess })
 
-      render(<Component />)
+      render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
@@ -309,7 +315,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -337,7 +343,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -364,7 +370,7 @@ describe('lazy', () => {
         onSuccess: individualOnSuccess,
       })
 
-      render(<Component />)
+      render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
@@ -381,7 +387,7 @@ describe('lazy', () => {
 
       const Component = lazy(() => mockImport('/test-component'))
 
-      render(<Component />)
+      render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
@@ -398,7 +404,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -414,7 +420,7 @@ describe('lazy', () => {
 
       const Component = lazy(() => mockImport('/test-component'))
 
-      expect(() => render(<Component />)).not.toThrow()
+      expect(() => render(<Component x="test" />)).not.toThrow()
 
       await act(() => vi.advanceTimersByTimeAsync(100))
       expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
@@ -434,7 +440,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component1 />
+          <Component1 x="test" />
         </ErrorBoundary>
       )
 
@@ -450,7 +456,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component2 />
+          <Component2 x="test" />
         </ErrorBoundary>
       )
 
@@ -470,7 +476,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component1 />
+          <Component1 x="test" />
         </ErrorBoundary>
       )
 
@@ -486,7 +492,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component2 />
+          <Component2 x="test" />
         </ErrorBoundary>
       )
 
@@ -505,8 +511,8 @@ describe('lazy', () => {
       const Component = lazy(() => mockImport('/test-component'))
       const Component2 = lazy(() => mockImport('/test-component'))
 
-      expect(() => render(<Component />)).not.toThrow()
-      expect(() => render(<Component2 />)).not.toThrow()
+      expect(() => render(<Component x="test" />)).not.toThrow()
+      expect(() => render(<Component2 x="test" />)).not.toThrow()
 
       expect(mockReload).toHaveBeenCalledTimes(0)
       expect(storage.length).toBe(0)
@@ -522,7 +528,7 @@ describe('lazy', () => {
 
         render(
           <ErrorBoundary fallback={<div>error</div>}>
-            <Component />
+            <Component x="test" />
           </ErrorBoundary>
         )
 
@@ -549,7 +555,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -570,7 +576,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -595,7 +601,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -621,7 +627,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error</div>}>
-          <Component />
+          <Component x="test" />
         </ErrorBoundary>
       )
 
@@ -644,7 +650,7 @@ describe('lazy', () => {
 
       render(
         <ErrorBoundary fallback={<div>error1</div>}>
-          <Component1 />
+          <Component1 x="test" />
         </ErrorBoundary>
       )
 
@@ -657,7 +663,7 @@ describe('lazy', () => {
       // Component2 should still be able to retry (not affected by Component1's retry count)
       render(
         <ErrorBoundary fallback={<div>error2</div>}>
-          <Component2 />
+          <Component2 x="test" />
         </ErrorBoundary>
       )
 
@@ -706,7 +712,7 @@ describe('lazy', () => {
 
         render(
           <ErrorBoundary fallback={<div>error</div>}>
-            <Component />
+            <Component x="test" />
           </ErrorBoundary>
         )
 
@@ -739,7 +745,7 @@ describe('lazy', () => {
 
         render(
           <ErrorBoundary fallback={<div>error</div>}>
-            <Component />
+            <Component x="test" />
           </ErrorBoundary>
         )
 
@@ -777,7 +783,7 @@ describe('lazy', () => {
 
         render(
           <ErrorBoundary fallback={<div>error</div>}>
-            <Component />
+            <Component x="test" />
           </ErrorBoundary>
         )
 
@@ -804,7 +810,7 @@ describe('lazy', () => {
 
         render(
           <ErrorBoundary fallback={<div>error</div>}>
-            <Component2 />
+            <Component2 x="test" />
           </ErrorBoundary>
         )
 
diff --git a/packages/react/src/lazy.ts b/packages/react/src/lazy.ts
index 320c941ac..ccb0c0c58 100644
--- a/packages/react/src/lazy.ts
+++ b/packages/react/src/lazy.ts
@@ -1,8 +1,8 @@
 import { type ComponentType, type LazyExoticComponent, lazy as originalLazy } from 'react'
 
-interface LazyOptions {
-  onSuccess?: ({ load }: { load: () => Promise<{ default: ComponentType<any> }> }) => void
-  onError?: ({ error, load }: { error: unknown; load: () => Promise<{ default: ComponentType<any> }> }) => void
+interface LazyOptions<TComponentType extends ComponentType<any>> {
+  onSuccess?: ({ load }: { load: () => Promise<{ default: TComponentType }> }) => void
+  onError?: ({ error, load }: { error: unknown; load: () => Promise<{ default: TComponentType }> }) => void
 }
 
 /**
@@ -39,12 +39,12 @@ interface LazyOptions {
  * ```
  */
 export const createLazy =
-  (defaultOptions: LazyOptions) =>
-  <T extends ComponentType<any>>(
-    load: () => Promise<{ default: T }>,
-    options?: LazyOptions
-  ): LazyExoticComponent<T> & {
-    load: () => Promise<{ default: T }>
+  (defaultOptions: LazyOptions<ComponentType<any>>) =>
+  <TComponentType extends ComponentType<any>>(
+    load: () => Promise<{ default: TComponentType }>,
+    options?: LazyOptions<TComponentType>
+  ): LazyExoticComponent<TComponentType> & {
+    load: () => Promise<{ default: TComponentType }>
   } => {
     const composedOnSuccess = () => {
       options?.onSuccess?.({ load })
@@ -125,7 +125,7 @@ interface ReloadOnErrorStorage {
   removeItem: (key: string) => void
 }
 
-interface ReloadOnErrorOptions extends LazyOptions {
+interface ReloadOnErrorOptions extends LazyOptions<ComponentType<any>> {
   /**
    * The number of times to retry the loading of the component. \
    * If `true`, the component will be retried indefinitely.
@@ -173,7 +173,7 @@ export const reloadOnError = ({
   storage,
   reload,
   ...options
-}: ReloadOnErrorOptions): LazyOptions => {
+}: ReloadOnErrorOptions): LazyOptions<ComponentType<any>> => {
   const reloadStorage = (() => {
     if (storage) return storage
     if (typeof window !== 'undefined' && 'sessionStorage' in window) return window.sessionStorage

From 79a4db6939128cf7e72a00644234d12601dd00a3 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 3 Mar 2026 14:06:50 +0900
Subject: [PATCH 10/10] fix(lazy): update test assertions to reflect changes in
 component rendering

- Modified test assertions in `lazy.spec.tsx` to include the `x` prop in the rendered output of lazy-loaded components.
- Ensured consistency in the expected output across multiple test cases, aligning with recent updates to the `ImportCache` class.
---
 packages/react/src/lazy.spec.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/lazy.spec.tsx b/packages/react/src/lazy.spec.tsx
index e033c4ae3..596d00a2c 100644
--- a/packages/react/src/lazy.spec.tsx
+++ b/packages/react/src/lazy.spec.tsx
@@ -66,7 +66,7 @@ class ImportCache {
     return {
       default: ({ x }: { x: string }) => (
         <div>
-          Component from {path} {x}
+          Component from {path} x:{x}
         </div>
       ),
     }
@@ -164,18 +164,18 @@ describe('lazy', () => {
     render(<Example />)
 
     expect(screen.getByText('not loaded')).toBeInTheDocument()
-    expect(screen.queryByText('Component from /test-component')).not.toBeInTheDocument()
+    expect(screen.queryByText('Component from /test-component x:test')).not.toBeInTheDocument()
 
     screen.getByRole('button', { name: 'load' }).click()
     expect(screen.getByText('not loaded')).toBeInTheDocument()
-    expect(screen.queryByText('Component from /test-component')).not.toBeInTheDocument()
+    expect(screen.queryByText('Component from /test-component x:test')).not.toBeInTheDocument()
 
     screen.getByRole('button', { name: 'show' }).click()
     expect(screen.getByText('not loaded')).toBeInTheDocument()
     await act(() => vi.advanceTimersByTimeAsync(0))
     expect(screen.getByText('loading...')).toBeInTheDocument()
     await act(() => vi.advanceTimersByTimeAsync(100))
-    expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+    expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
     expect(screen.queryByText('not loaded')).not.toBeInTheDocument()
   })
 
@@ -238,7 +238,7 @@ describe('lazy', () => {
 
       expect(screen.getByText('loading...')).toBeInTheDocument()
       await act(() => vi.advanceTimersByTimeAsync(200))
-      expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+      expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
     })
 
     it('should handle permanently failing imports', async () => {
@@ -267,7 +267,7 @@ describe('lazy', () => {
       render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
-      expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+      expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
 
       expect(onSuccess).toHaveBeenCalledTimes(1)
     })
@@ -302,7 +302,7 @@ describe('lazy', () => {
       render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
-      expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+      expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
 
       expect(onSuccess).toHaveBeenCalledTimes(1)
     })
@@ -373,7 +373,7 @@ describe('lazy', () => {
       render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
-      expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+      expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
 
       expect(defaultOnSuccess).toHaveBeenCalledTimes(1)
       expect(individualOnSuccess).toHaveBeenCalledTimes(1)
@@ -390,7 +390,7 @@ describe('lazy', () => {
       render(<Component x="test" />)
 
       await act(() => vi.advanceTimersByTimeAsync(100))
-      expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+      expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
 
       expect(defaultOnSuccess).toHaveBeenCalledTimes(1)
     })
@@ -423,7 +423,7 @@ describe('lazy', () => {
       expect(() => render(<Component x="test" />)).not.toThrow()
 
       await act(() => vi.advanceTimersByTimeAsync(100))
-      expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+      expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
     })
   })
 
@@ -499,7 +499,7 @@ describe('lazy', () => {
       expect(mockImport).toHaveBeenCalledTimes(2)
 
       await act(() => vi.advanceTimersByTimeAsync(50))
-      expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+      expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
 
       expect(mockReload).toHaveBeenCalledTimes(1)
     })
@@ -817,7 +817,7 @@ describe('lazy', () => {
         expect(mockImport).toHaveBeenCalledTimes(2)
 
         await act(() => vi.advanceTimersByTimeAsync(100))
-        expect(screen.getByText('Component from /test-component')).toBeInTheDocument()
+        expect(screen.getByText('Component from /test-component x:test')).toBeInTheDocument()
 
         expect(defaultOnError).toHaveBeenCalledTimes(1)
         expect(individualOnError).toHaveBeenCalledTimes(1)