SWR React Tutorial - Complete Course for Beginners

This concise yet comprehensive tutorial will delve into all the concepts of the SWR or State While Revalidate library. I hope you enjoy!😊

📚 Materials/References:

⭐️ Contents ⭐

⌨️ 00:00 Intro
⌨️ 00:33 What is SWR or Stale While Revalidate?
⌨️ 01:22 Setup
⌨️ 02:40 Setup the fake mock backend
⌨️ 03:10 Old way of fetching data from server in react
⌨️ 07:00 First SWR query using useSWR hook
⌨️ 09:00 Create fetcher function
⌨️ 11:10 SWRConfig provider
⌨️ 13:10 Global config
⌨️ 15:15 Create first query function
⌨️ 19:20 Chained or dependable queries
⌨️ 24:30 Mutations (life cycles, callbacks, ...)
⌨️ 30:00 useSWRMutation
⌨️ 35:40 Passing data to mutations function and trigger
⌨️ 37:00 Optimistic UI and data
⌨️ 39:07 RollBackOnError
⌨️ 41:10 Middlewares
⌨️ 43:40 Pagination
⌨️ 50:10 Infinite scrolling (useSWRInfinite)

🎨 My Editor Settings:

- JetBrains Mono
- Dracula

#swr #nextjs #tanstack-query #react-query

[codegenix]

Between SWR library, React Query or other server state management libraries, what is your choice and why?

[josuedavidkennedymamani]

I was too lost to use this library but this tutorial fit me like a glove, thank you very much

I can't thank you enough. Thank you for this great tutorial on swr
🥰🥰

[intigr]

Brilliant video - this really explains a lot. I love the way you started by trimming out all the crud, and the pace with which you move through the demo. Very helpful!
One question: In your VSCode you are getting popups telling you what attributes you can choose from (e.g. 36:05). What VSCode extension are you using to give you that?

[keshavgupta]

Thank you sir I asked for this in your last video 🙌🙏

[muratasarslan]

very succint & easy to follow. Thank you 😃

[saudkhan]

thankyou this was so much helpful and eazy to understand !
can you please make 1 video about multi-stepper form with input, select, datepicker and radiobuttons with react-hook form and zod or yup validations and percentage styles ..

[devlhb]

I want to start a new project, and I would like an example of a project structure

[naufalnasrullah]

3:15 create components folder inside app dir doesn't affect the route? is there any convention for that with _ at first letter like _components? i'm new so i don't understand

[jasontricolor]

You made it easier for understanding definitely. I just have one question, all the GET methods will be in the fetcher functions, and so we don't need a try...catch and nothing related when only getting results? And can we rely on swr for doing all this process for us?

[mmaarafat]

Thank you so much. If possible, can you make a video about AWS that we should learn as web developer?

[MohammedSohail-jkxr]

When wrapping children in a Provider component, which is a client component, the SSR advantage is lost, right?

So i wrote this export function usePosts(pageIndex) {
return
}, but it returns everything from the backend yet I gave it a limit. do I have to the limits on the backend?

[ВладКеся]

You make some amazing videos. When are the new ones coming out?

[tnnz]

what if the GET method has header authorization how to handle them?

[riteshgsh]

Hey I learnt Tanstack Query from your video, but I cannot get it right with react-error-boundary and React suspense. It's a bit of work to always do if (isLoading) or if (isError). Having ErrorBoundary and Suspense make it a lot easier.
I have tried the example of tanstack query docs for the same but couldn't get it right.

[SarveshOfficial-ri]

Which is best react query or swr ? I am currently working on my capstone project which needs a good fetching, pooling, kind of realtime updates. For state management i am using recoil. I am confused between choosing react query and swr.
Can you guide me please

[bahramiwd]

Hey Code Genix, are you Iranian? Btw, loved your tutorials...

[leviathanxid]

I have a question, I can already use React Query which I learned from your video, do I have to learn SWR

[EhsanKhanahmadi]

Thank you very much for this video. May I ask where are you from?