fix: avoid creating new snapshot if cache was not updated at client during streaming

close vercel#2473
x-ref vercel#2391

Author: promer94

core/use-swr.ts

@@ -160,12 +160,17 @@ export const useSWRHandler = <Data = any, Error = any>(
         ...snapshot
       }
     }
-
+    const cachedData = getCache()
+    const initialData = getInitialCache()
+    const clientSnapshot = getSelectedCache(cachedData)
+    const serverSnapshot =
+      cachedData === initialData
+        ? clientSnapshot
+        : getSelectedCache(initialData)
     // To make sure that we are returning the same object reference to avoid
     // unnecessary re-renders, we keep the previous snapshot and use deep
     // comparison to check if we need to return a new one.
-    let memorizedSnapshot = getSelectedCache(getCache())
-    const memorizedInitialSnapshot = getSelectedCache(getInitialCache())
+    let memorizedSnapshot = clientSnapshot
 
     return [
       () => {
@@ -174,7 +179,7 @@ export const useSWRHandler = <Data = any, Error = any>(
           ? memorizedSnapshot
           : (memorizedSnapshot = newSnapshot)
       },
-      () => memorizedInitialSnapshot
+      () => serverSnapshot
     ]
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cache, key])

e2e/site/pages/initial-render.tsx

@@ -1,4 +1,5 @@
 import useSWR from 'swr'
+import { Profiler } from 'react'
 
 const useFetchUser = () =>
   useSWR(
@@ -11,8 +12,20 @@ const useFetchUser = () =>
       })
   )
 
-export default function UserSWR() {
+function UserSWR() {
   useFetchUser()
-  console.log('UserSWR rendered')
   return <div>SWRTest</div>
 }
+
+export default function SWRTest() {
+  return (
+    <Profiler
+      id="swr"
+      onRender={() => {
+        ;(window as any).onRender('UserSWR rendered')
+      }}
+    >
+      <UserSWR />
+    </Profiler>
+  )
+}

e2e/test/initial-render.test.ts

@@ -5,14 +5,7 @@ test.describe('rendering', () => {
     page
   }) => {
     const log: any[] = []
-    await page.exposeFunction('consoleLog', (msg: any) => log.push(msg))
-    await page.addInitScript(`
-      const log = window.console.log
-      window.console.log = (...args) => {
-        consoleLog(...args)
-        log(...args)
-      }
-    `)
+    await page.exposeFunction('onRender', (msg: any) => log.push(msg))
     await page.goto('./initial-render', { waitUntil: 'commit' })
     await expect(page.getByText('SWRTest')).toBeVisible()
     expect(log).toHaveLength(1)

package.json

@@ -77,7 +77,7 @@
     "clean": "pnpm -r run clean && rimraf playwright-report test-result",
     "watch": "pnpm -r run watch",
     "build": "pnpm build-package _internal && pnpm build-package core && pnpm build-package infinite && pnpm build-package immutable && pnpm build-package mutation && pnpm build-package subscription",
-    "build:e2e": "pnpm next build e2e/site",
+    "build:e2e": "pnpm next build e2e/site -- --profile",
     "build-package": "bunchee index.ts --cwd",
     "types:check": "pnpm -r run types:check",
     "prepublishOnly": "pnpm clean && pnpm build",

test/use-swr-integration.test.tsx

@@ -592,25 +592,4 @@ describe('useSWR', () => {
       ]
     `)
   })
-
-  it.skip('should not render if the result of swr is not used', async () => {
-    const key = createKey()
-    const fetcher = jest.fn(() => createResponse(key, { delay: 100 }))
-    const onRender = jest.fn()
-    function Page() {
-      useSWR(key, fetcher)
-      return <div>test</div>
-    }
-    function App() {
-      return (
-        <Profiler id={key} onRender={onRender}>
-          <Page />
-        </Profiler>
-      )
-    }
-    renderWithConfig(<App />)
-    await sleep(200)
-    expect(fetcher).toBeCalledTimes(1)
-    expect(onRender).toBeCalledTimes(1)
-  })
 })