React Data Fetching with Hooks using SWR

We will show how to use SWR, how to configure it globally, and a pattern I like to use which separates data fetching from data display.

[felipemuner]

Thank you so much, I’m coming from vue and yours videos are the easier way to go till now :) keep doing this great job 👍

[MDM]

Thanks Leigh, you have a great way of teaching these concepts, I hope you will never stop making videos :)

[chadrackkyungu]

thank you for making this wonderful tutorial, I really love the filtering part, it was something I have been looking for every time have items that I want to filter by category

[hadisiswanto]

lebih baik terlambat dari pada tidak sama sekali, makasi banyak Om Hall...

[amutoi]

I needed to learn SWR for a code challenge. Thanks for the tutorial!

[blarvinius]

You got subscriber! Great unhurried explanations. Thanks.

[maxiequa]

Another awesome tutorial Leigh! Perfectly explained, definitely inspired me to use SWR in future projects. I await your follow up video mapping locations etc.

[TheRonron]

At 3:46, where did you output/print the response?

[JS-tgzp]

Awesome video! You can explain really well!

[agk]

Very useful. Thanks, man. Keep it up.

[logistics_guy]

Thank you. I’m confused to choose between useQuery and useSWR. Could you give me an advice?

[tonybrown]

Nice video! I will be trying this for a functional component I plan on refactoring. If all goes as planned I’ll use it app wide for convenience.

Also thank you for the introduction to this package and keeping this video lite without overkill. I would’ve stopped watching. I can take it from here.

[sj]

Great, thank you! Even better with 1.5 speed :)

[lagiator]

You explain things well, keep making videos. Btw I'd prefer if you demonstrated the library more than refactoring and things...

[randomlife]

Good video. The filtering part was cool. But somehow I felt you deviated from the actual topic. Swr has lot of other features like revalidation, de duplication, refresh intervals etc

[LaPunzy]

Hey Leigh,
I have read that .json() -- in your fetcher

"Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON, which is a JavaScript value of datatype object, string, etc."

Because it is returning it as JSON, why don't we need to do JSON.parse() to turn it into javascript object before using it?

[chany]

Hi Leigh como estas? how you doing ? I evaluating to implement SWR or React Query for a new feature in my proyect, and future remote fetchs (I hate doing this in redux) and this new feature is a home page with several fetchs of product categories, I think this approach solves the UX showing cached categories instead render all spiners every time.
I see React Query takes more size in bundle but i like the devtools to, i dont know.. ok thanks

[shashankduhan]

I am experiencing an issue with using global unbinded mutate function, when I put more than one mutant function call with different keys one after the another it only mutates the first one and ignores next mutate calls!!

[vishalppatel]

Hi @Leigh, awesome tutorial. I tried to implement swr in a typescript project after watching your video. But spreading the args in fetcher is giving me errors because it could not infer types. Can you please suggest a solution if you know one?

[abcool]

so it means i can use swr instead of axios/ fetch to get data from by backend api also and to display it on my react frontend?