WhenVisible useEffect function is not recreated when params change. #2152

packages/react/src/WhenVisible.ts

@@ -1,5 +1,5 @@
 import { ReloadOptions, router } from '@inertiajs/core'
-import { createElement, ReactElement, useEffect, useRef, useState } from 'react'
+import { createElement, ReactElement, useCallback, useEffect, useRef, useState } from 'react'
 
 interface WhenVisibleProps {
   children: ReactElement | number | string
@@ -17,11 +17,11 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
   fallback = fallback ?? null
 
   const [loaded, setLoaded] = useState(false)
-  const [fetching, setFetching] = useState(false)
-  const observer = useRef<IntersectionObserver | null>(null)
+  const fetchedOnceRef = useRef<boolean>(false)
+  const fetchingRef = useRef<boolean>(false)
   const ref = useRef<HTMLDivElement>(null)
 
-  const getReloadParams = (): Partial<ReloadOptions> => {
+  const getReloadParams = useCallback<() => Partial<ReloadOptions>>(() => {
     if (data) {
       return {
         only: (Array.isArray(data) ? data : [data]) as string[],
@@ -33,40 +33,41 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
     }
 
     return params
-  }
+  }, [params, data])
 
   useEffect(() => {
     if (!ref.current) {
       return
     }
-
-    observer.current = new IntersectionObserver(
+    let observer: IntersectionObserver
+    observer = new IntersectionObserver(
       (entries) => {
         if (!entries[0].isIntersecting) {
           return
         }
 
-        if (!always) {
-          observer.current?.disconnect()
+        if (!always && fetchedOnceRef.current) {
+          observer.disconnect()
         }
 
-        if (fetching) {
+        if (fetchingRef.current) {
           return
         }
 
-        setFetching(true)
+        fetchedOnceRef.current = true
+        fetchingRef.current = true
 
         const reloadParams = getReloadParams()
 
         router.reload({
           ...reloadParams,
           onStart: (e) => {
-            setFetching(true)
+            fetchingRef.current = true
             reloadParams.onStart?.(e)
           },
           onFinish: (e) => {
             setLoaded(true)
-            setFetching(false)
+            fetchingRef.current = false
             reloadParams.onFinish?.(e)
           },
         })
@@ -76,12 +77,12 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
       },
     )
 
-    observer.current.observe(ref.current)
+    observer.observe(ref.current)
 
     return () => {
-      observer.current?.disconnect()
+      observer.disconnect()
     }
-  }, [ref])
+  }, [ref, getReloadParams, buffer])
 
   if (always || !loaded) {
     return createElement(

packages/react/test-app/Pages/WhenVisible.jsx

@@ -1,31 +1,53 @@
 import { WhenVisible } from '@inertiajs/react'
+import { useState } from 'react'
 
 const Foo = ({ label }) => {
   return <div>{label}</div>
 }
 
-export default () => (
-  <>
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible data="foo" fallback={<div>Loading first one...</div>}>
-        <Foo label="First one is visible!" />
-      </WhenVisible>
-    </div>
+export default () => {
+  const [count, setCount] = useState(0)
 
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible buffer={1000} data="foo" fallback={<div>Loading second one...</div>}>
-        <Foo label="Second one is visible!" />
-      </WhenVisible>
-    </div>
+  return (
+    <>
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible data="foo" fallback={<div>Loading first one...</div>}>
+          <Foo label="First one is visible!" />
+        </WhenVisible>
+      </div>
 
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible data="foo" fallback={<div>Loading third one...</div>} always>
-        <Foo label="Third one is visible!" />
-      </WhenVisible>
-    </div>
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible buffer={1000} data="foo" fallback={<div>Loading second one...</div>}>
+          <Foo label="Second one is visible!" />
+        </WhenVisible>
+      </div>
 
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible data="foo" fallback={<div>Loading fourth one...</div>}></WhenVisible>
-    </div>
-  </>
-)
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible data="foo" fallback={<div>Loading third one...</div>} always>
+          <Foo label="Third one is visible!" />
+        </WhenVisible>
+      </div>
+
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible data="foo" fallback={<div>Loading fourth one...</div>}></WhenVisible>
+      </div>
+
+      <div style={{ marginTop: '6000px' }}>
+        <WhenVisible
+          fallback={<div>Loading fifth one...</div>}
+          always
+          params={{
+            data: {
+              count,
+            },
+            onSuccess: () => {
+              setCount((c) => c + 1)
+            },
+          }}
+        >
+          <Foo label={`Count is now ${count}`} />
+        </WhenVisible>
+      </div>
+    </>
+  )
+}

packages/svelte/test-app/Pages/WhenVisible.svelte

@@ -1,5 +1,7 @@
 <script>
   import { WhenVisible } from '@inertiajs/svelte'
+
+  export let count = 0
 </script>
 
 <div style="margin-top: 5000px">
@@ -39,3 +41,20 @@
     </svelte:fragment>
   </WhenVisible>
 </div>
+
+<div style="margin-top: 6000px">
+  <WhenVisible always params={{
+    data: {
+        count,
+    },
+    onSuccess() {
+        count += 1
+    }
+  }}>
+    <svelte:fragment slot="fallback">
+      <div>Loading fifth one...</div>
+    </svelte:fragment>
+
+    <div>Count is now {count}</div>
+  </WhenVisible>
+</div>

packages/vue3/test-app/Pages/WhenVisible.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { WhenVisible } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const count = ref(0)
 </script>
 
 <template>
@@ -40,4 +43,24 @@ import { WhenVisible } from '@inertiajs/vue3'
       </template>
     </WhenVisible>
   </div>
+
+  <div style="margin-top: 6000px">
+    <WhenVisible
+      always
+      :params="{
+        data: {
+          count,
+        },
+        onSuccess: () => {
+          count += 1
+        },
+      }"
+    >
+      <template #fallback>
+        <div>Loading fifth one...</div>
+      </template>
+
+      <div>Count is now {{ count }}</div>
+    </WhenVisible>
+  </div>
 </template>

tests/app/server.js

@@ -237,7 +237,7 @@ app.get('/when-visible', (req, res) => {
       props: {},
     })
 
-  if (req.headers['x-inertia-partial-data']) {
+  if (req.headers['x-inertia-partial-data'] || req.query.count) {
     setTimeout(page, 500)
   } else {
     page()

tests/when-visible.spec.ts

@@ -69,4 +69,19 @@ test('it will wait to fire the reload until element is visible', async ({ page }
   await expect(page.getByText('Loading fourth one...')).toBeVisible()
   await page.waitForResponse(page.url())
   await expect(page.getByText('Loading fourth one...')).not.toBeVisible()
+
+  await page.evaluate(() => (window as any).scrollTo(0, 26_000))
+  await expect(page.getByText('Loading fifth one...')).toBeVisible()
+  await page.waitForResponse(page.url() + '?count=0')
+  await expect(page.getByText('Loading fifth one...')).not.toBeVisible()
+  await expect(page.getByText('Count is now 1')).toBeVisible()
+
+  // Now scroll up and down to re-trigger it
+  await page.evaluate(() => (window as any).scrollTo(0, 20_000))
+  await page.waitForTimeout(100)
+
+  await page.evaluate(() => (window as any).scrollTo(0, 26_000))
+  await expect(page.getByText('Count is now 1')).toBeVisible()
+  await page.waitForResponse(page.url() + '?count=1')
+  await expect(page.getByText('Count is now 2')).toBeVisible()
 })