This Could Be the BEST Way to fetch data from an API in React! | SWR Preload & Optimistic UI

This Could Be the BEST way to fetch data from an API in React! - SWR 2.0 Preload & Optimistic UI have never been easier to implement. Let's check out SWR 2.0 React hooks for data fetching.

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

** Note: After video completion, I added a refactor to take advantage of the SWR populateCache function. I suggest completing the video and then viewing my refactor - code comments included.

SWR 2.0 with Preload & Optimistic UI

(00:00) Intro
(00:18) Welcome
(00:40) SWR Explained
(01:51) Starter Code
(02:44) Install SWR
(03:09) json-server
(03:51) Axios API layer
(05:57) Imports
(07:11) useSWR hook
(09:13) SWR mutate function
(12:17) What is a mutation?
(12:39) Check the CRUD operations
(13:38) Adding some delay
(15:27) Viewing stale data until success or fail
(16:27) SWR 2.0 Preload data
(19:10) Benefits of Optimistic UI updates
(20:04) Refactor to Optimistic UI
(21:01) Helper functions
(25:36) Import the helpers
(26:28) Mutate with Optimistic UI
(27:15) Checking the Optimistic UI
(28:04) A Challenge for You

📚 Tutorial References:

Was this SWR with Preload and Optimistic UI tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#swr #react #fetch

[pvsrod]

Nice introduction to SWR, thank you. Just a heads up for anybody trying to follow along, the implementation of the optimistic updates is different in the git repository (is more optimized) as there is no need for the "helpers/todoMutations" functions, everything can be done directly in the optimisticData option with the advantage that we have direct access to the cache and the responses from the CRUD operations

[kwheeler]

You are undoubtedly the best resource on the web. I have learned so much from your videos. Great job and THANK YOU.

[lukeskywalker]

Thank you very much for this very well structured tutorial and code example!!! have implemented swr client side fetching on a few occasions but never been so clear about all the moving parts!

[temoabesadze]

When I need to learn something, at first, I check if Dave Gray has a tutorial about it. Love your videos and your teaching style. Thank you.

[Gustavo-nzvt]

Best video i watched about SWR, your didactic is impressive! Thanks for sharing this with us

[mariolazzari]

each Dave lesson is a gift from paradise!

The ultimate Maestro

[fnine]

Hey Dave, nice video. Your content is very pertinent and complete!

[agus-wesly]

Great explanation as always! Thx dave your videos are very helpfull

[Doppio_]

I wanted to keep it simple and learn the core features.
this video helped me a lot.
thk dave, I didn't have much trouble understanding it even though I don't listen to much English

[sahaneakanayaka]

Another great tutorial . Your videos are really helping me to become a react pro... love you Dave and wish you best success ❤❤❤

[bravefastrabbit]

Thank you Dave, now I know exactly whatTodo!

[ayoubbenabid]

Thanks for the tutorial, this library looks to me exactly like react-query, maybe it would be a good idea to make a video to show the difference and make it easy for people to choose

[zephurylol]

How do you recommend handling an instance where you want a get /user and get /user/:id? It feels odd to me, as I wouldn't want the caches to be out of sync, where /user/id is mutated and /user is not, but at the same time, how do I take advantage of all these nice mutation, optimistic update and cache things? Am I overthinking it?

[AbdoBadr]

thanks dave, how use SWR with the App router sever components please ?

[novianto]

Good video, Dave. Can you make a video about trpc? Many people talk about it. Thanks.

[alexon]

This explanation logic makes sense for the complete CRUD process, but I'm a little lost that I have to figure out email and go through and click a button to login, so I only need to execute the useSWR() through a function then I can't sew because hooks won't let me how could I do it then?

[deepaksarkar]

Good video and swr seems best alternative for useEffect hook i've seen so far!, One thing I would do is to change the sort method, and render by descending id order from backend API itself instead of writing it everytime in frontend.

[toss]

Thank you dave, thats great tutorial!, whats theme of vscode youre using? and the coloring braces is also great.

[trycatchangler]

Hi Dave, there is some code missing that is in your video but not in your repo. The helpers folder with the muations is not on your git repo.. Edit: Disregard, I see it in the main TodoList file.; TY for the video!

[outletshelssy]

Muchas Gracias por este excelente video