the performance of your application. So like I said, we'll be making use of SWR, which stands for Stale While Revalidate, and it's based on a specification on how to handle caching. It's made by the same people who maintain Next.js, and is even used in Laravel's official Next.js starter for using Breeze. So if you take a look at that repo, you'll see in the source, auth, or hooks, auth, they are making use of SWR right here. So let's take a look at our own example. I have a simple app prepared here. So this info is actually coming from an API that's on my own server.

I have a simple app prepared here. So this info is actually coming from an API that's on my own server. It's just a Laravel app, which shows a bunch of users, and you can toggle it on or off here. And that's basically it. Take a look at the code here. We have the main app.js. Here is the toggling of that component. And then the component that grabs the information is in users right here. We have this useEffect hook, which grabs it from the API, and then sets these variables,

And then the component that grabs the information is in users right here. We have this useEffect hook, which grabs it from the API, and then sets these variables, which you typically see when you're grabbing information from an external source. So you have one to store the data, you have one for the loading indicator, and you have one for the error state, which I'm actually not using here. So in useEffect, you go ahead and fetch that information, you set the users when it's successful, you set the error when there's an error, and then you set the loading state. And for the JSX, I'm just showing the loading state. And when it's done loading, just show the users here. And for the Laravel app, it's just returning the users.

And when it's done loading, just show the users here. And for the Laravel app, it's just returning the users. And I have sleep(1) here to simulate some lag, so you can see the loading indicator. So pretty straightforward. Let's go back to the application here. Let me open up DevTools. And you'll see that every time I toggle this, there is a request here to the backend. And you can see the loading indicator for one second because I did make it sleep. And you can see there's no throttling here. If I just click this really fast, you'll see that there's always a request made.

And you can see there's no throttling here. If I just click this really fast, you'll see that there's always a request made. And there is some throttling built into SWR, which we'll take a look at. So let's replace this with SWR. Let me just rename this so you can compare this with what we're about to do. So let's rename it to original. Let's duplicate it. And let's rename it to users. And let's go ahead and install SWR here. Let's go to the docs.

So back to the docs here. You'll see that, where is it, right here. We can use the useSWR hook, provide the endpoint, provide a fetcher, and then it will return the data and the error. And the loading indicator is just if the data is null right here. So if not data. So let's go ahead and use this and replace our code here. So back here, let me just close this one. Let's replace all of this. So the entire useEffect and useState, I'm going to delete.

Let's replace all of this. So the entire useEffect and useState, I'm going to delete. And let's paste in the import up here. Let's grab the hook from here. So let's grab this. Let's paste it in. And instead of using a fetcher, I'm just going to do it manually for now to show you how it works. So we can just return a call to fetch ourselves. And this argument is the key.

So we can just return a call to fetch ourselves. And this argument is the key. And generally speaking, you want to use the endpoint as the key, but you can actually use whatever you like. So for now, we'll just say users for the key. And let's go ahead and grab the fetch call from this other one that we had originally. Let's just grab this portion, which has the endpoint and the response JSON, okay? Let's paste that in. And now the result of this should be stored in data here. And if there's an error, it will be stored in this variable here.

And now the result of this should be stored in data here. And if there's an error, it will be stored in this variable here. If you want, you can rename this. Let's go ahead and rename it to users in our case. And I'm going to grab this as well. So if there's an error, show an error. If there's a loading state, show that. And then we can just render it when it's none of those cases. So let's paste that right here. This should be users.

So let's paste that right here. This should be users. And for this, we can just grab what we have here. Okay, paste that in, we can get rid of this. And hopefully I did that correctly. So as you can see, it's much neater. We no longer need all of that state and the useEffect hook. It's all tucked away nicely within this useSWR hook. So let's see if this works. Back to our app.

There it takes one second. And now as I toggle this, you'll see that it shows instantly. Now you do see a new request here. But if I click this a lot, you'll see that it is throttled. So you'll see that it's not making a new request every time. It only makes it after a certain amount of time. And you can see the data is returning instantly because it's making use of a cache. So what's happening here, when I show it initially, it's already in the cache. So I'll show that data, make a request here, and if there's any new changes, then update this state here.

But two seconds seems like a good default. We'll take a look at a few other options here. But first, let me show you how to define a general fetcher, which is typically how you see SWR being used. So back here, what we want to do is generalize this fetch here, because you're going to be making use of it all over the place. So down here, you'll see a general version of it. It's called a fetcher. It's taking in any args you pass it, and then calling fetch again, and grabbing the JSON. So the args are typically the URL.

It's taking in any args you pass it, and then calling fetch again, and grabbing the JSON. So the args are typically the URL. And if you call it like this, the key is passed into here. So let's grab this. Let's paste it up here. So basically this, but now we don't have to call fetch ourselves. We can just make use of the fetcher here. Actually, let me grab the URL first. And then we'll delete it here. We can pass in the fetcher.

So back here, let me refresh. Okay. And it looks like it still works. And you can see the cache is still in place. Now this is fine if you're just using SWR in one application, but if you need it globally, you can do that as well. So if you need the fetcher globally, or any SWR options. So let's take a look at how we can do that. Back to the docs. Let's go to global config.

Back to the docs. Let's go to global config. So what we can do is make use of this swr-config-higher-order component, pass in a value prop, and pass in any options. So within the options, you can have the fetcher. So very similar to how context works. So let's go ahead and do this. Let's grab this. Let's go to either app.jsx, or let's do it in index.js, and wrap the entire app here. So we can paste this in.

Let's go to either app.jsx, or let's do it in index.js, and wrap the entire app here. So we can paste this in. Let's make sure to close that out. So swr-config. Let's make sure to import that. Let's grab the import from here. Let's paste that in here. Okay. You don't need to use swr in here. And we can pass any options in here, including the fetcher.

And that should pass it globally. Let me save this. And within users, we no longer need to pass the fetcher here. Because it's a global option. So let's get rid of this. Let's save this. And let's see if our app still works. So back here, let me refresh. And it still works. Cool.

Let's say five seconds. Let's save that. And now the throttling should be five seconds now. So again, I'm going to refresh. Even if I hit this multiple times, it won't make another request for another five seconds. There we go. Cool. So let me just put that back to the default. Again, 2000 is the default. If you don't define it, it will be 2000.

So right now there's only one. Keep an eye on this. Let me click off of it. Go back to it. You'll see that another request is made here. So that's what revalidateOnFocus means. Every time the tab is refocused, then it's going to make another request and update the data if needed. So for example, if I were to click off of this, let's go ahead and add another User to our backend here.

So for example, if I were to click off of this, let's go ahead and add another User to our backend here. I'm just going to do php artisan tinker. Let's say userFactory::create(). That should make one extra User. So we have Rodolfo. Let's click back on the tab and that User should be populated. There's the request and there is that new User. So yeah, that is on by default. I think it's pretty useful, but if you don't like it, you can turn it off.

So yeah, that is on by default. I think it's pretty useful, but if you don't like it, you can turn it off. And I believe the option is called revalidateOnFocus right here. So again, if you don't like that option, you can turn it off here. revalidateOnFocus. false. Let me save that. And now you'll see that, let me just refresh here. There's the initial call. And now since it's false, it won't happen when we refocus.

There's the initial call. And now since it's false, it won't happen when we refocus. You'll see that it's still one. You can also implement polling here. So if you constantly want to be checking for new data, you can do that with the refreshInterval, which is basically polling. So let's take a look at that right here. revalidateOnInterval. The option for that is refreshInterval. So let's add that.

But if I go back, it's still at five and just added one more here. So that is off by default and off is zero. So let me just put that back to zero. Now if you want to refresh manually, you can do that using the mutate function. So if you take a look at the mutate section here, you can either do it globally or you can do it from within the SWR hook. So in this case, we'll do it locally. So let me just add a button here in our JSX. Let's just make a fragment here. Let's add a button right here.

Let's just make a fragment here. Let's add a button right here. Say button. Say refetch data. And on click, we can say mutate. So let's do this. Let's say mutate. And we can grab that from our hook here. Right here. mutate.

So it shouldn't interfere here. So back to here. Let's just refresh manually. Okay. So there's one call. Let's go ahead and add another User to our backend. Okay. So Van Olsen was added. Let's refetch the data. There's the request.