Data Fetching using React Suspense and Error Boundary

Data Fetching using React Suspense and Error Boundary - React Data Fetching Patterns.

Рет қаралды 5,312

Күн бұрын

You can achieve similar outcomes in multiple ways. With React, you can perform data fetching in your components in several ways. Knowing "how" to do it is crucial, but knowing "why" to use one approach is essential.
This video teaches you about the React Data Fetching patterns and introduces you to the React 18 Suspense for data fetching. It also takes a deep dive into the Error Boundaries for handling data fetching errors elegantly.
YOU MUST NOT MISS IT.
Let's GO 🚀
Timecodes
0:00 - "Why vs How" in Data Fetching
01:01 - Data Fetching Patterns in React
03:34 - The "Fetch on Render" Pattern with Visual and Code
09:24 - The "Fetch then Render" Pattern with Visual and Code
14:00 - Problem With These Existing Patterns
14:48 - A New Pattern: Data Fetching with React Suspense
26:50 - What are Error Boundaries in React?
33:19 - An Announcement for YOU and Wrap up
The Source Code
- github.com/atapas/youtube/tre...
Other Videos I mentioned
- Pure Function and Side Effects: • What are Pure Function...
- JavaScript Async Await: • JavaScript async/await...
🤝 My Links:
- Blog: blog.greenroots.info/
- Follow on X(Twitter): / tapasadhikary
- Connect on LinkedIn: / tapasadhikary
- Follow My Work on GitHub: github.com/atapas
👋 Like my work? Thank You. You can sponsor me from here:
- Sponsor Me: github.com/sponsors/atapas
- Sponsor my Blog: blog.greenroots.info/sponsor
About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, KZfaqr, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.
You can find more about him at tapasadhikary.com.

Пікірлер: 46

@Sagarclips Күн бұрын

nailed it Tapas! keep it up

@tapasadhikary Күн бұрын

@@Sagarclips Thank you ❤️

@Prince-yz1tc 3 ай бұрын

Just a suggestion: You could use browser's inbuilt feature network throttling where you can intentionally slow down the request to show loading states to user.

@TanvirRahman 9 ай бұрын

Thank you for creating such a clear, comprehensive video.

@tapasadhikary 9 ай бұрын

Thanks a lot Tanvir ❤️

@asifiqbalmunna 8 ай бұрын

Generally i try to avoid this type of lengthy videos, as it’s tough to keep concentration for a long time. But the way you have explained the topic my concentration never wavered not even for a single moment. Thanks a lot sir..

@tapasadhikary 8 ай бұрын

Thanks a lot. I am glad that you found it helpful.

@gajanankanekar9118 3 ай бұрын

Excellent teaching, Sir.Thanks.

@tapasadhikary 3 ай бұрын

Thanks a lot ❤

@bhaskarjha2840 5 ай бұрын

what a great explanation :) understood everything in one go. Thank You sir

@tapasadhikary 5 ай бұрын

Great, I’m glad 😍

@arifulhaque3236 9 ай бұрын

Love from Bangladesh Sir. Those concepts are really underrated. Thanks for teaching us in a charismatic way. Can't wait for the next.js series.

@tapasadhikary 9 ай бұрын

Thanks a lot. First video is coming on Sunday.

@arifulhaque3236 9 ай бұрын

@@tapasadhikary That's Great Sir. All the best ❤️🇧🇩

@mitch1668 8 ай бұрын

Excellent video, great teaching and personality. Hope you continue growing this channel, subscribed!

@tapasadhikary 8 ай бұрын

Thanks a lot… for the wish. I hope it happens soon 😀

@aburaihan-py4vi 9 ай бұрын

Excellent!!!!!

@tapasadhikary 9 ай бұрын

Thank you 🙏

@chaipanch98 8 ай бұрын

Highly informative and valuable content. 🔥

@tapasadhikary 8 ай бұрын

Thank you for watching ❤️

@sublimeelectrons8699 9 ай бұрын

Just WOW! sir @tapas. Suspense makes things easier.

@tapasadhikary 9 ай бұрын

Yes a lot… and as you know it now, you will learn App Router even faster.

@abdulhay3905 8 ай бұрын

Good Understanding, Love from Bangladesh.

@tapasadhikary 8 ай бұрын

Take love Vai ❤️

@JujocoCS 7 ай бұрын

amazing presentation.

@tapasadhikary 7 ай бұрын

Thank you ❤️

@imranjms 6 ай бұрын

kalker video(sumit bhai + ali bhai r apnar ) ta joss chilo dadabhaii..

@tapasadhikary 6 ай бұрын

Thank you for joining vai… more to come

@imranjms 6 ай бұрын

just enrolled in the course dda.. See you in the course @@tapasadhikary

@ashwanipandey2631 9 ай бұрын

good video 🎉 add a quantity of content in this platform thanks

@tapasadhikary 9 ай бұрын

Thanks a lot, Ashwani 👍

@Rahul_Kalasuva 9 ай бұрын

this was a nice video please sir make some more videos of industry standard development techniques

@tapasadhikary 9 ай бұрын

Thank Rahul ❤️. Do you mean coding standards? Btw, this video itself teaches 3 coding patterns and which one good for why… a frequently asked interview question 👍

@Rahul_Kalasuva 9 ай бұрын

@@tapasadhikary yes coding standards as well as clean structured code

@tapasadhikary 9 ай бұрын

@Rahul_Kalasuva sure.

@ps2controllerreview 9 ай бұрын

Thank you for the amazing explanation!

@tapasadhikary 9 ай бұрын

Hey, welcome and glad it you liked it.

@yabuking84 4 ай бұрын

8:16 what do you mean until useEffect() is done its not going to render at all? Nothing was halted, the component is actually rendering, that's why you can see the loading component because it rendered that.

@tapasadhikary 4 ай бұрын

UseEffect is asynchronous so it doesn’t block anything… what I meant there was the data that the effect brings for the component to render is on wait until the effect is done. It was to put in the contrary to the next strategy where we fetched things beforehand. Sorry for the confusion and may be not using the right term there 😀. Also, thanks a lot for your comment 👍

@yabuking84 4 ай бұрын

@@tapasadhikary thanks for clearing it up sir, i was a bit confused, react newbie here. Been only doing Vue but recently been doing React.

@user-kf5fj6fm5e 5 ай бұрын

Which one is more effective, using react query or fetch while render process? @tapas da

@tapasadhikary 5 ай бұрын

More than rendering, it depends on your application use cases. If your application is small, simple, do not require a lot of server-side controls like caching etc.. go with fetch API, always. When you need features like caching, automatic refetching, etc.. prefer the react query for a better control.

@mitch1668 8 ай бұрын

Is React Suspense possible with Firebase?

@tapasadhikary 7 ай бұрын

Yes, very much

@sureshlahane3017 3 ай бұрын

where I cant use Error Boundary, means the limit of Error Boundary🙃

@ayushshende4290 5 күн бұрын

Okay two questions: Where does libraries like react-query and swr fit (in which approach) ? Secondly, I came across one other approach where the react-router's loader api is used in conjunction with react-query. loader api is used to pre-fetch and react-query for caching. What do you have to say about this approach?