IDK - useSWR - React Hook for Data Fetching (Client-Side)

I don't know how to use the useSWR React Hook.

That’s okay, let’s figure it out together.

When building web applications in React, you almost always come to a point where you need to get some data from some where. While you can just use the built-in JavaScript Fetch API by itself, there are more effective and efficient ways of utilizing it. My new favorite way is by using the JavaScript Fetch API alongside the useSWR hook.

What is SWR?

According to SWR, SWR (stale-while-revalidate) is a strategy to first return the data from cache (data that has been stored in a temporary location to be accessed faster), then send a fetch request (revalidate...the process of refreshing the data), and lastly returning up-to-date data.

This is nice. It allows you to simplify the logic involved in fetching data for your projects.

SWR also comes with numerous valuable features you may not have known you needed like, refetching on intervals. It can even be used with TypeScript.

The useSWR hook takes in a few parameters:

useSWR( key, fetcher, options )

• key : this is a unique key string needed for the request. (i.e. URL or an endpoint)

• fetcher : a promise returning function to fetch the data (i.e. a function using the Fetch API or Axios) **optional

• options : an object of various options for use with this SWR hook **optional

What will you get back from the useSWR hook?

There is so much information you are able to retrieve when using the hook. We will focus on the main return values :

• data : the data resolved from the fetcher

• isloading : if the request is still ongoing and no data has been loaded yet

• error : any error that has been thrown by the fetcher while attempting to fetch the data

There are more return values and a long list of options that are extremely useful. You can learn more on

How do you get started using the useSWR hook in you React application?

1. You'll need to install the package into you project.
   npm i swr

2. Next, import the useSWR to the functional component.

import useSWR from 'swr'

1. We need to create a fetcher. Although, the useSWR hook is super convenient, it alone does not fetch the data. We’ll create a fetcher using JavaScript Fetch API, but you can use other ways fetch data as well, like Axios.

const fetcher = (...args) => { fetch(...args)
.then(res => res.json())
}

1. Using object destruction, we'll get a few our return values to help us determine the 3 possible states of our request.

const  UserProfile = () => { 

const key = 'api/user-info/123'

const { data, isLoading, error } = useSWR(key ,fetcher); 

  return(    
    <> ... </>
 )
}

1. Great! Now we can use the return values in a meaningful way.

• If there was an error while fetching our data, we could :

if(error) return <div> Error </div>

• If the data is still being loaded, we could :

if(isLoading)return 
<div> Loading... </div>

1. We have successfully retrieved our data, we could now display that data.

import useSWR  from 'swr' 

const  UserProfile = () => { 

const key = 'api/user-info/123' 
const { data, isLoading, error} = useSWR( key ,fetcher);   

if(error) return <div> Error </div>  

if(isLoading) return <div> Loading... </div>  

return(   
    <div>       
       <p> Hello, </p>    
       <h3> {data.name} </h3>              
  </div>
 )
}
export default UserProfile;

I have enjoyed using the useSWR hook so far and I hope you give it a try.

There are so many other features when using SWR, I definitely encourage you to check out the docs at SWR

As always...It's okay to say IDK.