Skip to content

Automatic Revalidation

💡If you want to manually revalidate the data, check mutation.

Revalidate on Focus

When you re-focus a page or switch between tabs, SWR automatically revalidates data.

This can be useful to immediately synchronize to the latest state. This is helpful for refreshing data in scenarios like stale mobile tabs, or laptops that went to sleep.

Video: using focus revalidation to automatically sync login state between pages.

This feature is enabled by default. You can disable it via the revalidateOnFocus option.

Revalidate on Interval

In many cases, data changes because of multiple devices, multiple users, multiple tabs. How can we over time update the data on screen?

SWR will give you the option to automatically refetch data. It’s smart which means refetching will only happen if the component associated with the hook is on screen.

Video: when a user makes a change, both sessions will eventually render the same data.

You can enable it by setting a refreshInterval value:

useSWR('/api/todos', fetcher, { refreshInterval: 1000 })

There're also options such as refreshWhenHidden and refreshWhenOffline. Both are disabled by default so SWR won't fetch when the webpage is not on screen, or there's no network connection.

Revalidate on Reconnect

It's useful to also revalidate when the user is back online. This scenario happens a lot when the user unlocks their computer, but the internet is not yet connected at the same moment.

To make sure the data is always up-to-date, SWR automatically revalidates when network recovers.

This feature is enabled by default. You can disable it via the revalidateOnReconnect option.