requestIdleCallback blocked by browser extensions

[kalley]

Bug report

Description / Observed Behavior

What kind of issues did you encounter with SWR?

Data isn't revalidating when certain browser extensions are installed. One I know for certain is UI.Vision RPA. It appears to hold up requestIdleCallback from ever being called.

Expected Behavior

How did you expect SWR to behave here?

It would revalidate the data appropriately.

Repro Steps / Code Example

Or share your code snippet or a CodeSandbox link is also appreciated!

You should be able to test this with any code that tries to revalidate directly from useSWR (mutate will push a revalidation through). This doesn't work in CodeSandbox, due to the sandbox.

One way to get around this is to specify the timeout option for requestIdleCallback. I did this locally just to see if it would work, and it did. I just don't know what the default for that should be.

Additional Context

SWR version. 0.3.6
Add any other context about the problem here.

[shuding]

That's super interesting, even React itself used to have the native requestIdleCallback (with a better considered polyfill).

Although that's an issue of those wrongly implemented extensions, not SWR. We will consider using requestAnimationFrame instead (also doesn't block rendering).

[kalley]

@shuding I agree with you on that. I did, locally, change it to be rIC(softRevalidate, { timeout: 100 }) and it did work as intended. This was in Chrome, so I don't know how other browsers work on that front. And according to MDN's docs:

A timeout option is strongly recommended for required work, as otherwise it's possible multiple seconds will elapse before the callback is fired.