Skip to content

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

Merged
shuding merged 1 commit intomainfrom
andrewgadzik/webcore-45-improve-swr-slowness
Jul 2, 2025
Merged

fix: Optimize the revalidation logic for same key requests.#4138
shuding merged 1 commit intomainfrom
andrewgadzik/webcore-45-improve-swr-slowness

Conversation

@agadzik
Copy link
Copy Markdown
Contributor

@agadzik agadzik commented Jun 27, 2025 •
edited
Loading

Problem

The SWR hook was experiencing performance issues due to inefficient request deduplication logic, causing unnecessary re-renders and redundant API calls when multiple components used the same key.

Solution

Added a performance optimization at line 644 that checks if a request is already in progress before initiating a new one:

  // 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)
    }
  }

Key Changes

  • Deduplication Check: Before triggering initial revalidation, the code now checks if FETCH[key] exists, preventing duplicate revalidations for the same key

This optimization ensures that when multiple components request the same data simultaneously, only one actual fetch request is made, improving overall application performance.

Testing

@gdborton created the e2e/site/app/perf/page.tsx as an example of the problem. I then created a playwright test that asserts that the "Expensive Component" should be rendered under 1 second.

Before the fix

$ pnpm test:e2e perf --repeat-each 10 -j 1 
$ pnpm test:e2e perf --repeat-each 10 -j 1 

> swr@2.3.3 test:e2e /Users/agadzik/Developer/swr
> playwright test "perf" "--repeat-each" "10" "-j" "1"


Running 10 tests using 1 worker
  1) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1241

  2) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1218.7000000029802

  3) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1233.3999999985099

  4) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1209.6000000014901

  5) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1254

  6) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1216.6000000014901

  7) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1256.699999999255

  8) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1230.7000000029802

  9) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1200.800000000745

  10) test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 

    Error: expect(received).toBeLessThan(expected)

    Expected: < 1000
    Received:   1227.199999999255

  10 failed
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click 
    test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click

After the fix

$ pnpm test:e2e perf --repeat-each 10 -j 1 
$ pnpm test:e2e perf --repeat-each 10 -j 1 

> swr@2.3.3 test:e2e /Users/agadzik/Developer/swr
> playwright test "perf" "--repeat-each" "10" "-j" "1"


Running 10 tests using 1 worker
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 215.90ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 217.80ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 215.00ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 216.30ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 213.90ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 220.80ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 215.80ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 216.40ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 215.30ms
test/perf.test.ts:4:7 › performance › should render expensive component within 1 second after checkbox click
Expensive Component fully rendered and painted in 217.50ms
  10 passed (9.0s)

(Mobile) Deployments List page testing (before and after)

Screen.Recording.2025-06-27.at.9.49.23.AM.mov

(Desktop) Deployments List page testing (before and after)

Screen.Recording.2025-06-26.at.2.18.02.PM.mov

@agadzik agadzik requested review from huozhi and shuding as code owners June 27, 2025 13:43
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Jun 27, 2025

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

shuding
shuding approved these changes Jul 2, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@shuding shuding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great optimization, thanks!

@shuding shuding changed the title Optimize the revalidation logic for same key requests. fix: Optimize the revalidation logic for same key requests. Jul 2, 2025
@shuding shuding merged commit 32f1098 into main Jul 2, 2025
6 checks passed
@shuding shuding deleted the andrewgadzik/webcore-45-improve-swr-slowness branch July 2, 2025 14:59
@gdborton gdborton mentioned this pull request Jul 2, 2025
Closed
3 tasks
dcondrey pushed a commit to dcondrey/swr that referenced this pull request Dec 24, 2025
@agadzik @dcondrey
fix: Optimize the revalidation logic for same key requests. (vercel#4138
1c4f3ca 
)

Optimize the revalidation logic for same key requests.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@shuding shuding shuding approved these changes

@huozhi huozhi Awaiting requested review from huozhi huozhi is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@agadzik @shuding