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

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

## Other Videos I mentioned

## 🤝 My Links:

## 👋 Like my work? Thank You. You can sponsor me from here:

## About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, YouTuber, 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.

[Prince-yztc]

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.

[asifiqbalmunna]

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..

[sublimeelectrons]

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

[TanvirRahman]

Thank you for creating such a clear, comprehensive video.

[arifulhaque]

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.

[bhaskarjha]

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

[mitch]

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

[chaipanch]

Highly informative and valuable content. 🔥

[abdulhay]

Good Understanding, Love from Bangladesh.

[imranjms]

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

[ashwanipandey]

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

[Rahul_Kalasuva]

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

[yabuking]

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.

[kffjfme]

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

[pscontrollerreview]

Thank you for the amazing explanation!

[mitch]

Is React Suspense possible with Firebase?

[sureshlahane]

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

[ayushshende]

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?