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.
Thanks for your efforts! I've just got a few notes to mention: Your example of "Fetch then Render" is actually the exact same as "Fetch on Render". All you did was move the code from inside the function into separate functions, but you still run the code from inside the component and they work exactly the same as if they were written inside. All you did was just some refactoring that has no effect. Also, the code you made in "Fetch then Render" does not solve the "network waterfall" issue. The `fetchAllData()` function will fetch sequentially due to the use of `await`, meaning that `await fetchTime()` will not start until `await fetchCountries()` finishes and returns data.
This is fantastically clear, thankyou - feels like the missing piece when trying to get to grips with data fetching in React. Often tutorials just show you a method but as you pick up different methods/approaches, it's never really clear why a particular approach or technology is used. For example, I have been using React Router's loaders, which if I understand correctly would more truly into the 'fetch then render' pattern than even the example you gave (which technically renders/mounts first, provides a loading state, and then re-renders with the fetched data). But then it's recommended that you supplement this with something like Suspense to handle loading states. Before this video though, it was really unclear to me as to why you even needed a Suspense fallback component when you could just conditionally render using a loading state within the same component - but now I can see how using a more declarative approach is more useful than conditional rendering. Also keen to see how this will be good preparation for using Next.js!
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..
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.
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 👍
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.
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 👍
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?
this is totally different side of how others showcase Suspense and Error Boundary. Appreciate it.
Thank you!
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.
Yes, great point.
Thanks for your efforts! I've just got a few notes to mention:
Your example of "Fetch then Render" is actually the exact same as "Fetch on Render". All you did was move the code from inside the function into separate functions, but you still run the code from inside the component and they work exactly the same as if they were written inside. All you did was just some refactoring that has no effect.
Also, the code you made in "Fetch then Render" does not solve the "network waterfall" issue. The `fetchAllData()` function will fetch sequentially due to the use of `await`, meaning that `await fetchTime()` will not start until `await fetchCountries()` finishes and returns data.
This is fantastically clear, thankyou - feels like the missing piece when trying to get to grips with data fetching in React. Often tutorials just show you a method but as you pick up different methods/approaches, it's never really clear why a particular approach or technology is used.
For example, I have been using React Router's loaders, which if I understand correctly would more truly into the 'fetch then render' pattern than even the example you gave (which technically renders/mounts first, provides a loading state, and then re-renders with the fetched data). But then it's recommended that you supplement this with something like Suspense to handle loading states. Before this video though, it was really unclear to me as to why you even needed a Suspense fallback component when you could just conditionally render using a loading state within the same component - but now I can see how using a more declarative approach is more useful than conditional rendering.
Also keen to see how this will be good preparation for using Next.js!
Wow, thanks a lot ❤️
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..
Thanks a lot. I am glad that you found it helpful.
Thank you for creating such a clear, comprehensive video.
Thanks a lot Tanvir ❤️
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.
Thanks a lot. First video is coming on Sunday.
@@tapasadhikary That's Great Sir. All the best ❤️🇧🇩
Excellent teaching, Sir.Thanks.
Thanks a lot ❤
Excellent video, great teaching and personality. Hope you continue growing this channel, subscribed!
Thanks a lot… for the wish. I hope it happens soon 😀
Good Understanding, Love from Bangladesh.
Take love Vai ❤️
what a great explanation :) understood everything in one go. Thank You sir
Great, I’m glad 😍
Just WOW! sir @tapas. Suspense makes things easier.
Yes a lot… and as you know it now, you will learn App Router even faster.
Highly informative and valuable content. 🔥
Thank you for watching ❤️
kalker video(sumit bhai + ali bhai r apnar ) ta joss chilo dadabhaii..
Thank you for joining vai… more to come
just enrolled in the course dda..
See you in the course @@tapasadhikary
Which one is more effective, using react query or fetch while render process? @tapas da
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.
nailed it Tapas! keep it up
@@Sagarclips Thank you ❤️
good video 🎉 add a quantity of content in this platform thanks
Thanks a lot, Ashwani 👍
amazing presentation.
Thank you ❤️
Thank you for the amazing explanation!
Hey, welcome and glad it you liked it.
this was a nice video please sir make some more videos of industry standard development techniques
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 👍
@@tapasadhikary yes coding standards as well as clean structured code
@Rahul_Kalasuva sure.
Excellent!!!!!
Thank you 🙏
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.
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 👍
@@tapasadhikary thanks for clearing it up sir, i was a bit confused, react newbie here. Been only doing Vue but recently been doing React.
Is React Suspense possible with Firebase?
Yes, very much
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?
where I cant use Error Boundary, means the limit of Error Boundary🙃