Most of the time, when doing a client-side data fetching in React app, we use useEffects and states to handle the data or we called using a Hook API. Yet, there’re problems when using a Hook API:

1. Updating the above query in one instance won't update it for the other instances.
2. If we have three components using a hook that makes an API request, we will get at least one request per component.
3. If we have multiple requests in the air, and we try to store them in a global store or have the hook hold the state, we will end up with state out of sync or subsequent requests overwriting each other.

There’s one potential solution to those problem, which only let one request at the same endpoint occurred and share data across components. The one solution is using a SWR with a lot of benefits over using the useEffects.

SWR, the abbreviation of state-while-revalidate, is a react library for client-side data fetching. I quote these sentences from the SWR website to describe more about SWR.

SWR is a HTTP cache invalidation strategy popularized by HTTP RFC 5861(opens in a new tab). SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data. With SWR, components will get a stream of data updates constantly and automatically. And the UI will be always fast and reactive.

SWR will cache the data that we load in a page. So, if we open the same page again after navigating away or in different places, then SWR will automatically load the old cache data first and show it immediately on the screen without waiting for loading spinner to finish spinning. In the background, SWR still re-fetch the latest data updates and do refresh if necessary.

The main feature is to speed up the loading time when fetching the same request, seems like taking SSR feature to SPA. Beside the caching feature, SWR also makes it easier to share data to different places in the app and we can avoid the prop trailing problem by not passing the state between components.

Another feature is when there’s an error on the server, by default our fetch function in the UI will try to re-fetch the endpoint in a certain interval time. It also done requests in different places inside the app that has same endpoint request. SWR automatically recognize the same request and it deduplicate the request by only fetch once and sharing the response data to different places.

In React, there’re other alternatives that mostly used for state management such as React Query. You can see the comparison in this link Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router | TanStack Query Docs.

While in Vue, there’re many options available such as VueRequest that support Vue 2 and Vue 3.

I’ve followed this tutorial to create a simple app with React SWR. The demo can be seen in this link.

We can observe the cache by installing SWR Devtools extension to our browser. As we can see in the image below, the cache will be registered with the key that we define in the SWR. Most importantly the data from request is already stored there and can be used immediately along with our page being rendered.

SWR demo in a page with SWR Dev Tools.

• More detail information and documentations about SWR can be found in this link Getting Started – SWR.
• Why You Should Use React Query or SWR - This Dot Labs