Difference between focusThrottleInterval and dedupingInterval

[b2m9]

Hi there 👋

The docs don't really tell me much. What's the difference between focusThrottleInterval and dedupingInterval?

Thanks!

[shuding]

Hey! Since SWR has focus revalidation enabled by default, focusThrottleInterval is to prevent doing a lot of revalidations if the window is getting and losing focus too frequently. So basically it means "do focus revalidation, but don't do it again during the focusThrottleInterval timespan".

And dedupingInterval is more general and it's the deduplication duration for more things, including focus revalidations. For example this is controlled by dedupingInterval:

const [show, setShow] = useState(false)

return <>
  {show ? <Foo/> : null}
  <button onClick={() => setShow(!show)}>toggle</button>
</>

Say if you have a SWR hook inside <Foo>, when clicking the toggle button, it will be mounted so a request will be initiated. But if you click too frequently it will cause a lot of unnecessary requests. The dedupingInterval option can avoid that and lots of other scenarios too, such as re-using SWR hooks in different components and avoid duplicate requests.

Both option has its own default value that you can find in the docs, hope this answer helps!

[trainoasis]

Thanks for a great asnwer. What happens if we use both? Who takes precedence ?

[webMasterMrBin]

great, i think this answer should be added to the swr docs