fix: Optimize the revalidation logic for same key requests. (#4138)

Optimize the revalidation logic for same key requests.

Author: agadzik

e2e/site/app/perf/page.tsx

@@ -0,0 +1,63 @@
+'use client'
+import { useState } from 'react'
+import useSWR from 'swr'
+
+const elementCount = 10_000
+const useData = () => {
+  return useSWR('1', async (url: string) => {
+    return 1
+  })
+}
+
+const HookUser = () => {
+  const { data } = useData()
+  return <div>{data}</div>
+}
+/**
+ * This renders 10,000 divs and is used to compare against the render performance
+ * when using swr.
+ */
+const CheapComponent = () => {
+  const cheapComponents = Array.from({ length: elementCount }, (_, i) => (
+    <div key={i}>{i}</div>
+  ))
+  return (
+    <div>
+      <h2>Cheap Component</h2>
+      {cheapComponents}
+    </div>
+  )
+}
+
+/**
+ * This renders 10,000 divs, each of which uses the same swr hook.
+ */
+const ExpensiveComponent = () => {
+  const hookComponents = Array.from({ length: elementCount }, (_, i) => (
+    <HookUser key={i} />
+  ))
+  return (
+    <div>
+      <h2>Expensive Component</h2>
+      {hookComponents}
+    </div>
+  )
+}
+
+export default function PerformancePage() {
+  const [renderExpensive, setRenderExpensive] = useState(false)
+  return (
+    <div>
+      <h1>Performance Page</h1>
+      <label>
+        <input
+          type="checkbox"
+          checked={renderExpensive}
+          onChange={e => setRenderExpensive(e.target.checked)}
+        />
+        Render with swr
+      </label>
+      {!renderExpensive ? <CheapComponent /> : <ExpensiveComponent />}
+    </div>
+  )
+}

e2e/test/perf.test.ts

@@ -0,0 +1,115 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('performance', () => {
+  test('should render expensive component within 1 second after checkbox click', async ({
+    page
+  }) => {
+    // Navigate to the perf page
+    await page.goto('./perf', { waitUntil: 'load' })
+
+    // Inject performance measurement into the page
+    await page.evaluate(() => {
+      const checkboxInput = document.querySelector(
+        'input[type="checkbox"]'
+      ) as HTMLInputElement
+      let expensiveComponentContainer: HTMLElement | null = null
+      const targetChildCount = 10_000
+      let startTime = 0
+
+      // Track when React starts and completes rendering
+      const observer = new MutationObserver(mutations => {
+        for (const mutation of mutations) {
+          const addedNodes = Array.from(mutation.addedNodes)
+          for (const node of addedNodes) {
+            if (node instanceof HTMLElement) {
+              const h2 = node.querySelector?.('h2')
+              if (h2?.textContent === 'Expensive Component') {
+                expensiveComponentContainer = node
+                console.log('Found Expensive Component container')
+              }
+            }
+          }
+
+          if (expensiveComponentContainer) {
+            const renderedComponents =
+              expensiveComponentContainer.querySelectorAll('div > div').length
+
+            if (renderedComponents % 1000 === 0 && renderedComponents > 0) {
+              console.log(`Rendered ${renderedComponents} components...`)
+            }
+
+            if (renderedComponents >= targetChildCount) {
+              console.log(`All ${renderedComponents} components rendered!`)
+
+              // Use requestAnimationFrame to ensure the browser has painted
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                  // Double RAF to ensure we're after the paint
+                  window.performance.mark('expensive-component-painted')
+                  const paintTime = performance.now() - startTime
+                  console.log(
+                    `Total time including paint: ${paintTime.toFixed(2)}ms`
+                  )
+                })
+              })
+
+              observer.disconnect()
+            }
+          }
+        }
+      })
+
+      observer.observe(document.body, { childList: true, subtree: true })
+
+      // Capture more precise timing
+      checkboxInput.addEventListener(
+        'click',
+        () => {
+          startTime = performance.now()
+          window.performance.mark('state-change-start')
+          console.log('Checkbox clicked, state change started')
+        },
+        { once: true }
+      )
+    })
+
+    // Find and click the checkbox
+    const checkbox = page.locator('input[type="checkbox"]')
+    await checkbox.click()
+
+    // Wait for the expensive component to be fully rendered
+    const expensiveComponentHeading = page.locator(
+      'h2:has-text("Expensive Component")'
+    )
+    await expect(expensiveComponentHeading).toBeVisible({ timeout: 60_000 })
+
+    // Wait for all components and paint to complete
+    await page.waitForFunction(
+      () => {
+        return (
+          window.performance.getEntriesByName('expensive-component-painted')
+            .length > 0
+        )
+      },
+      { timeout: 5000 }
+    )
+
+    // Get the render time from state change to paint
+    const renderTime = await page.evaluate(() => {
+      const startMark =
+        window.performance.getEntriesByName('state-change-start')[0]
+      const paintMark = window.performance.getEntriesByName(
+        'expensive-component-painted'
+      )[0]
+
+      if (!startMark || !paintMark) {
+        throw new Error('Performance marks not found')
+      }
+
+      return paintMark.startTime - startMark.startTime
+    })
+
+    // Assert that the rendering took less than 1 second (1000ms)
+    expect(renderTime).toBeLessThan(1000)
+  })
+})

src/index/use-swr.ts

@@ -278,8 +278,8 @@ export const useSWRHandler = <Data = any, Error = any>(
 
   const returnedData = keepPreviousData
     ? isUndefined(cachedData)
-      // checking undefined to avoid null being fallback as well
-      ? isUndefined(laggyDataRef.current)
+      ? // checking undefined to avoid null being fallback as well
+        isUndefined(laggyDataRef.current)
         ? data
         : laggyDataRef.current
       : cachedData
@@ -639,13 +639,17 @@ export const useSWRHandler = <Data = any, Error = any>(
 
     // Trigger a revalidation
     if (shouldDoInitialRevalidation) {
-      if (isUndefined(data) || IS_SERVER) {
-        // Revalidate immediately.
-        softRevalidate()
-      } else {
-        // Delay the revalidate if we have data to return so we won't block
-        // rendering.
-        rAF(softRevalidate)
+      // Performance optimization: if a request is already in progress for this key,
+      // skip the revalidation to avoid redundant work
+      if (!FETCH[key]) {
+        if (isUndefined(data) || IS_SERVER) {
+          // Revalidate immediately.
+          softRevalidate()
+        } else {
+          // Delay the revalidate if we have data to return so we won't block
+          // rendering.
+          rAF(softRevalidate)
+        }
       }
     }