perf: optimize useSWRConfig with useMemo to maintain stable reference (#4110)

Author: samuel871211

src/_internal/utils/use-swr-config.ts

@@ -1,9 +1,14 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { defaultConfig } from './config'
 import { SWRConfigContext } from './config-context'
 import { mergeObjects } from './shared'
 import type { FullConfiguration } from '../types'
 
 export const useSWRConfig = (): FullConfiguration => {
-  return mergeObjects(defaultConfig, useContext(SWRConfigContext))
+  const parentConfig = useContext(SWRConfigContext)
+  const mergedConfig = useMemo(
+    () => mergeObjects(defaultConfig, parentConfig),
+    [parentConfig]
+  )
+  return mergedConfig
 }

test/use-swr-context-config.test.tsx

@@ -1,6 +1,12 @@
-import { act, screen } from '@testing-library/react'
-import useSWR, { mutate } from 'swr'
+import { act, render, screen } from '@testing-library/react'
+import useSWR, {
+  mutate,
+  SWRConfig,
+  type SWRConfiguration,
+  useSWRConfig
+} from 'swr'
 import { createKey, createResponse, renderWithGlobalCache } from './utils'
+import { useCallback, useEffect, useState } from 'react'
 
 describe('useSWR - context configs', () => {
   it('mutate before mount should not block rerender', async () => {
@@ -25,3 +31,46 @@ describe('useSWR - context configs', () => {
     await screen.findByText('data')
   })
 })
+
+describe('useSWRConfig hook maintains stable reference across re-renders', () => {
+  it('should maintain the same swrConfig reference when counter updates', () => {
+    const parentConfig: SWRConfiguration = {
+      revalidateOnMount: true,
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false
+    }
+    const counterButtonText = 'counter + 1'
+    let useSWRConfigReferenceChangedTimes = 0
+    function Page() {
+      return (
+        <SWRConfig value={parentConfig}>
+          <ChildComponent />
+        </SWRConfig>
+      )
+    }
+    function ChildComponent() {
+      const swrConfig = useSWRConfig()
+      const [, setCounter] = useState(0)
+      const counterAddOne = useCallback(
+        () => setCounter(prev => prev + 1),
+        [setCounter]
+      )
+      useEffect(() => {
+        useSWRConfigReferenceChangedTimes += 1
+      }, [swrConfig])
+      return <button onClick={counterAddOne}>{counterButtonText}</button>
+    }
+    render(<Page />)
+    act(() => {
+      screen.getByText(counterButtonText).click()
+    })
+    act(() => {
+      screen.getByText(counterButtonText).click()
+    })
+    act(() => {
+      screen.getByText(counterButtonText).click()
+    })
+    expect(useSWRConfigReferenceChangedTimes).toBe(1)
+  })
+})