Give me those slick & snappy app transitions that you get with a single page application.
A more developer focussed update this week as I swap out my basic Axios requests with Vercel’s SWR hook, effectively removing the loading spinner for repeat views of my app making it a much nicer experience for an admin going back and forth between pages.
Transcript
One of the main benefits of using the React stack is the fact you get slick interactions, that single page application, really nice loading transitions, and so that’s what I wanted for my first BigCommerce app
My first version of it looks like this. It has the category list. You get to go to a category and edit the rules for that category saying, perhaps, you want to set a sale price.
If the sale price exists, then put it in this Blinds category. Albeit you’d want to do that in the Sale category, but you get the idea.
Now my frustration with it is going back and forth, I have a nice loading spinner, but I really wish that it wouldn’t take the second or two and I can optimize the APIs to respond fast and throw more servers at it.But I felt like I wanted an intelligent caching strategy that just had a little bit of lightweight caching in there.
Now if you’re in the React ecosystem, you will have heard of SWR, which uses the stale-while-revalidate strategy, for all of your HTTP requests, which essentially means: show the old thing and I’ll go in the background check if there’s anything new to tell you about.
Incorporating that into the hooks that I had for data fetching took about an hour, just getting familiar with the library and wrapping them with SWR but it now means that going back and forth between the categories they’re instantaneous.
And then even if I make a change and save this category, I can go back and forth and it’s still immediately there. It hasn’t provided the old cache. The worst thing I want to do with implementing a caching strategy is then I serve old cache when I’m not meant to. You can instruct SWR when you need to refresh the cache.
So that’s, it was, I was incredibly impressed with how quickly I’ve got this up and running and how it made that just next level in terms of slick interactions, so I didn’t even need to show a loading spinner.
This is the code for it. So feel free to judge me on my first React app and the first custom hook that I’ve written, but this hook fetches that list of categories and returns that state.
So that’s on the left-hand side. I have a simple useEffect hook that is doing that just on the first initial component mount and saves the categories, but obviously on every mount of that component or any component of that uses this hook, it’s going to make that fetch request again.
Whereas on the right-hand side, we have our component, our hook using SWR, which is a little bit shorter, which is always nice.
But other than that, its essentially does the same thing.
You have to pass in a Fetcher because it doesn’t actually do the HTTP request itself.
So still using Axios to make my request, and I’ve disabled a couple of the options that SWR have. So, every time you focused on a component and normally it would revalidate, i.e. go make a request to make sure you’ve got the latest data.
That felt like it was a little bit, making too many requests for my liking.
So turned that off and I also turned off revalidate when reconnect, the context of this app is that it’s within the BigCommerce admin, so it’s not like it’s going to be a long-lived, single page application. So decided to turn those off.
Other than that, it’s very simple. Much less that is needed in the useEffect hook.
And yeah, really impressed with how quickly it was to get up and running. It’s not a massive deal, but it did make the UX a little bit better. And yeah, I’ll be using this for, I think, every request that I ever make again in React.
Thanks very much!
