Why does useSWR make 2 calls to the backend for every request?

Bug report

Description / Observed Behavior

When request happened, swr made 2 call.

First time was old params,

Second is new params.

Expected Behavior

Change one time, request one time. No old params request.

Repro Steps / Code Example

https://codesandbox.io/s/adoring-https-xftf8?file=/pages/index.js

// When currentMenu.market or currentMenu.group or currentMenu.inst changed, send a request to backend.
const { data, error } = useSWR(
    currentMenu.inst
      ? [
          "/api/playbackCharts",
          currentMenu.market,
          currentMenu.group,
          currentMenu.inst,
        ]
      : null,
    fetcher,
  );

Additional Context

SWR version: 1.0.1

[rkoleci]

Im no master in useSwr but seems like @shuding is correct.

It’s the focusing that causes the calls.

However, you can disable that bt passing a third param to useSwr hook:

const { data, error } = useSWR(/api/num?num=${2}, fetcher, { revalidateOnFocus: false });

Something like that. 😃

[shuding]

Because SWR has focus revalidation enabled by default, when you are focusing on the code editor and click the button, it is a focus event so the old key will be revalidated. And then the key changes so a new revalidation is started.

I do think it can be improved in this particular scenario, so I’ll keep the issue open. I think the way to fix this is to make focus revalidation async and cancelable.