fix: react Deferred component

inertiajs · Jan 31, 2025 · 7924502 · 7924502
1 parent fc8e1d4
commit 7924502
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/react/src/Deferred.ts b/packages/react/src/Deferred.ts
@@ -1,5 +1,6 @@
-import { ReactElement, useEffect, useState } from 'react'
+import { ReactElement, useEffect, useMemo, useState } from 'react'
 import usePage from './usePage'
+import { router } from '.'
 
 interface DeferredProps {
   children: ReactElement | number | string
@@ -14,7 +15,12 @@ const Deferred = ({ children, data, fallback }: DeferredProps) => {
 
   const [loaded, setLoaded] = useState(false)
   const pageProps = usePage().props
-  const keys = Array.isArray(data) ? data : [data]
+  const keys = useMemo(() => Array.isArray(data) ? data : [data], [data])
+
+  useEffect(() => {
+    const removeListener = router.on("start", () => setLoaded(false));
+    return () => { removeListener() }
+  }, [])
 
   useEffect(() => {
     setLoaded(keys.every((key) => pageProps[key] !== undefined))