Initialise nextFocusRevalidatedAt on mount (vercel#2857)

mgoodfellow · web-flow · commit ec275b40d2f6 · 2025-03-05T10:29:35.000+01:00
* Initialise nextFocusRevalidatedAt on mount

* Update tests to reflect new behaviour
diff --git a/src/index/use-swr.ts b/src/index/use-swr.ts
@@ -589,9 +589,15 @@ export const useSWRHandler = <Data = any, Error = any>(
 
     const softRevalidate = revalidate.bind(UNDEFINED, WITH_DEDUPE)
 
+    let nextFocusRevalidatedAt = 0
+
+    if (getConfig().revalidateOnFocus) {
+      const initNow = Date.now()
+      nextFocusRevalidatedAt = initNow + getConfig().focusThrottleInterval
+    }
+
     // Expose revalidators to global event listeners. So we can trigger
     // revalidation from the outside.
-    let nextFocusRevalidatedAt = 0
     const onRevalidate = (
       type: RevalidateEvent,
       opts: {
diff --git a/test/use-swr-cache.test.tsx b/test/use-swr-cache.test.tsx
@@ -180,7 +180,8 @@ describe('useSWR - cache provider', () => {
     let value = 0
     function Page() {
       const { data } = useSWR(key, () => value++, {
-        dedupingInterval: 0
+        dedupingInterval: 0,
+        focusThrottleInterval: 0
       })
       return <>{String(data)}</>
     }
@@ -402,7 +403,8 @@ describe('useSWR - global cache', () => {
     let value = 0
     function Page() {
       const { data } = useSWR(key, () => value++, {
-        dedupingInterval: 0
+        dedupingInterval: 0,
+        focusThrottleInterval: 0
       })
       return <>{String(data)}</>
     }
diff --git a/test/use-swr-focus.test.tsx b/test/use-swr-focus.test.tsx
@@ -17,7 +17,8 @@ describe('useSWR - focus', () => {
     const key = createKey()
     function Page() {
       const { data } = useSWR(key, () => value++, {
-        dedupingInterval: 0
+        dedupingInterval: 0,
+        focusThrottleInterval: 0
       })
       return <div>data: {data}</div>
     }
@@ -131,19 +132,17 @@ describe('useSWR - focus', () => {
     await screen.findByText('data: 0')
 
     await waitForNextTick()
-    // trigger revalidation
-    await focusWindow()
     // still in throttling interval
     await act(() => sleep(20))
     // should be throttled
     await focusWindow()
-    await screen.findByText('data: 1')
+    await screen.findByText('data: 0')
     // wait for focusThrottleInterval
     await act(() => sleep(100))
 
     // trigger revalidation again
     await focusWindow()
-    await screen.findByText('data: 2')
+    await screen.findByText('data: 1')
   })
 
   it('focusThrottleInterval should be stateful', async () => {
@@ -168,17 +167,17 @@ describe('useSWR - focus', () => {
     await screen.findByText('data: 0')
 
     await waitForNextTick()
-    // trigger revalidation
+    // trigger revalidation, won't revalidate as within 50ms
     await focusWindow()
     // wait for throttle interval
     await act(() => sleep(100))
-    // trigger revalidation
+    // trigger revalidation, will revalidate as 50ms passed
     await focusWindow()
-    await screen.findByText('data: 2')
+    await screen.findByText('data: 1')
 
     await waitForNextTick()
     // increase focusThrottleInterval
-    fireEvent.click(screen.getByText('data: 2'))
+    fireEvent.click(screen.getByText('data: 1'))
     // wait for throttle interval
     await act(() => sleep(100))
     // trigger revalidation
@@ -187,15 +186,15 @@ describe('useSWR - focus', () => {
     await act(() => sleep(100))
     // should be throttled
     await focusWindow()
-    await screen.findByText('data: 3')
+    await screen.findByText('data: 2')
 
     // wait for throttle interval
     await act(() => sleep(150))
     // trigger revalidation
     await focusWindow()
     // wait for throttle intervals
     await act(() => sleep(150))
-    await screen.findByText('data: 4')
+    await screen.findByText('data: 3')
   })
 
   it('should revalidate on focus even with custom cache', async () => {
@@ -205,7 +204,8 @@ describe('useSWR - focus', () => {
     function Page() {
       const { data } = useSWR(key, () => value++, {
         revalidateOnFocus: true,
-        dedupingInterval: 0
+        dedupingInterval: 0,
+        focusThrottleInterval: 0
       })
       return <div>data: {data}</div>
     }
