0

I'm using SWR hook along with next.js for the first time and i've tried to get some answers about something but i couln't get them, not even with the docs.

Questions: So, i know SWR provides a cache with your data, and it updates in real time, but i'm kinda lost between two options that you have to use the hook. So, normally, you have dedupeInterval and refreshInterval

refreshInterval = 0: polling interval (disabled by default)
dedupingInterval = 2000: dedupe requests with the same key in this time span

Now, what are the differences between these two ? if i have two request with the same key, it will update after two seconds ? is it the same as refreshInterval ? if i use refreshInterval, would i have problems with performance ? since it's making a request in very short periods of time

If you can help me with this, it would be great !

Thanks for your time !!

Diego
  • 421
  • 3
  • 9
  • 34

1 Answers1

2

Now, what are the differences between these two ?

The difference is that:

  • refreshInterval is defining a time after which a new request will be sent to update your data. eg. every second.
  • dedupeInterval is defining a time during which if a request was already sent for a specific data (ie. a data having a specific key), when rendering a component that asks for a new request to refresh that data, the refresh will not be done.

Deduplicating means eliminating duplicates, ie. making potentially less requests, not more. They give an example in their documentation with a component that renders 5 times another component called <Avatar /> that uses the swr hook. But the actual request will be made only once because that rendering will be within the default 2 seconds time span.

If i have two request with the same key, it will update after two seconds ? Is it the same as refreshInterval ?

No, the dedupeInterval set to 2 seconds will not automatically update the data. It will update it only if a component using the same key with the swr hook is rerendered after the 2 seconds. Or if you haven't deactivated other updating mechanisms like on focus and the user puts the focus on your component.

With refreshInterval there would be an API call every X amount of time, as long as the component is still mounted, even if it doesn't rerender and the user doesn't interact with it.

If i use refreshInterval, would I have problems with performance ? Since it's making a request in very short periods of time.

Yes, if the user opens your page and does nothing but reading content during 20 seconds, and you have set the refreshInterval to 1 second, there will be 20 API calls to update that data during that time. That behavior may be useful if your data changes every few seconds and you need to have the UI up to date. But clearly it can be a performance issue.

The reason why the refreshInterval is disabled by default whereas the dedupeInterval is set to 2 seconds is to avoid too many API calls.

Roman Mkrtchian
  • 2,548
  • 1
  • 17
  • 24
  • Yes, that was i was thinking, i set refreshInterval to two seconds for all the request, in less than a minute, literally, 300 requests... So thanks for making clear your points even though dedupeInterval seems kinda hard to understand :/ But, i just have another question. In my app, i need to update stuff when data changes, does dedupeInterval help me with that ? i cut the refreshInterval, and it seems that everything works as expected, even though it takes like 15 seconds to update, not two like before – Diego May 28 '21 at 22:40
  • 1
    If you need to do something when your data changes, use a `useEffect` and add your data as a dependency of it. But you will not be notified when the data changes on backend side. To get the information that data has changed more often you have to make API calls more often (and for that you can use a `refreshInterval`, a smaller value for `dedupeInterval` etc.). But it's a tradeoff. – Roman Mkrtchian May 28 '21 at 22:47