Fetching Data in React - Complete Tutorial
ฝัง
- เผยแพร่เมื่อ 14 มิ.ย. 2023
- Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we talk about data fetching in React. This is a complete tutorial teaching you everything there is to know about how to fetch data in React. You'll learn about loading, handling error states, and even how to prevent race conditions using abort controllers. We'll use some hooks such as useState, useEffect, and useRef. We will use the fetch API from Node.js and we briefly mention React Query and how it can simplify things. Enjoy!
Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react
Browser is showing "this site can't be reached"
Been stuck learning react for months and now I found this gem of a channel. Keep it up bro!
I like that you state the basics of fetching data instead of only (how to) , so thanks a lot for your help
Your videos are such a masterpiece 👍 I really hope your channel will grow very fast because you deserve it so much. Really good quality content 💯
thanks a lot! I hope so too!
I think u should also add some check statement for response.ok, because this is common case in handling responses from your own API, and u can receive response with status 400(some form validation error) or 500(some server internal error) and that's why its good practice to throw Error when !response.ok, btw, thanks for the video
I aspire to one day be able to teach people like you do. This is really high quality teaching my friend. Respect.
Your channel is gonna pop off. Your content is top-notch 💯💯
This video was extremely informative! Looking forward to watching more React content from your channel. Would be great if you could also make a best practices video for production code or even intermediate/advanced React videos
bro you are always just straight to the point. Thanks Man!
Thanks a lot for explain very clear. I saw lots of video in TH-cam, but your explain is so helpful for me as a junior react typescript developer. Bon courage!
one of the best video on data fetching with vanilla data fetching
Just when i saw you were using typescript I knew this would be a great tutorial. great video❤
I like your way of teaching and I am new for react, i came from backend zone so I am here for the next coding sessions to see how really manages my love of data.
Thank you for your effort. u got one sub.
I am just obsessed with your videoes ... great work 😀
I just subscribed 🎉
Love your videos man! It’s helping me with my internship projects
glad to hear it!
wow very informative tutorial, there is so much to learn from you.
I just hope you will keep creating vidoes that share your expertise in web development
will do!
Best instructor!! Thank you for such great content!!💯
Enthusiasm and knowledge! Thank you man
Super stuff man. Please keep it up!🎉
One video to like and subscribe! Really helpful and informative. Thanks and keep it up.
Thanks for the Abort Controller solution!
Fire man! 🔥 I’ve wait for you to post!
Yes! More videos to come! I'm currently on vacation so I've posted a bit less
Awesome stuff, thanks!
Thanks so much, you just helped me out big time!
This guy is good. Thanks for making great content
Awesome tutorial!
Never seen a lean step by step explanation. You are indeed a masterpiece @webdev-tom💯
Awesome vid im learning alot, thank you and keep it going.
glad to hear it!
One of the best! 👏
This is pure gold
This is very interesting video, exactly what I looking for. Thank you. Like
glad you found it useful!
Love it. You're the best.
Thanks ! You are a great explainer
very good explanation!
thank you for the video, i think you should add a cleanup function in the useEffect hook to cancel any ongoing requests when the component unmounts or when page changes (talking about the abort ).
Thanks for this great video. Will you consider doing a follow up video that discusses the pros/cons of the various (or most popular) React fetch methods/options (e.g. Axios et al) and suggest their usecases (when to use one over the other)?
Hmm not a bad idea tbh, will note it down!
golden content.
Love your videos
Great content
I really liked it 👍👍
excellent video very imformative guy
Good job!
Perfect!
awesome
!
Luv bro, from Bharat ❤
Great video. The main different I do is with the abortController, I always put that in the cleanup return, which is what I've seen in several other videos on the same topic, it's interesting to see you doing it differently, both ways look like it will work just as well though.
As for React Query you mentioned, do you plan on doing a tutorial on that?
Yeah that's another way to do it! And the RQ video has been up for a while already ☺️
@@cosdensolutions Ahh cool, still working my way through the videos. :) Really enjoying them .
I was trying to start the core of your project and i was keep getting an error. I believe i re-wrote it like 4 times.
And then i realized something i never learned before during my Bootcamp: you have everything with tsx lol. What i was trying to do, was to write everything in jsx. So i looked it up and apparently there is a "create react with typescript" 😵💫 and now it shows everything. Learning something new every day. Althought i am still a bit confused between tsx and jsx and their usage
Can I use hook useloader as async fucntion to fetch api data. That is optimize way and performance application increase.
For loading, I really like to use an object of properties like:
const FETCH_STATUS = {IDLE: 'idle', LOADING: 'loading', ERROR: 'error', SUCCESS: 'success'};
In that way I have a little bit more control over what I display on different occasions.
yep, that's another way to do it!
So useState is the Post a class previously you created so it here generic... Hope to clarify that... Thank
Yes, I created a type of Post, with id and title. There are more properties from the API but since we only use those, I just created that type!
please make videos on doing project. your channel is growing since last time i commented doing great keep it up i am your subscriber
How about livestreaming building an entire app from scratch, while also making it open source so anybody can contribute no matter the skill level? It'll be a great way to learn and build something real! And also, no worries, all videos will be available even after the live stream!
@@cosdensolutions yes thats good idea
Hey great tutorials will do a context api tutorial with fetching data and adding a cart functionality etc?
Haven't gotten around to doing tutorials of actual features but yes, I will do! However I have already a tutorial on useContext 😁
Thanks
I was wondering if we could add signal aborting in cleanup for useEffect instead at the top 🤔🤔 Will this work??
yes it would, it's actually better!
Hey Cosden! Thanks for the video. I never considered, or even never heard of, cancelling the racing condition. What I would normally do it is to disable the button that fires another call when the isLoading is true - it does the job 🚀. What do you think about my solution?
It would work, but then you're blocking the UI waiting for a response. What if the user changes their mind before the request returns? It's easier to let them change their mind and just cancel the pending request
@@cosdensolutions I agree with you. Actually, this is the first time I heard about the abortController(). I will keep this video as a reference when I develop sth that would need the abortController(). In my case, using isLoading to disable the UI for a second is a good enough option :)
Great video! But I’m trying to get in your discord channel but I need an invite link. The link in the description doesn’t work for me
it should work, or just manually go to discord.cosdensolutions.io
Any resource on data fetching and caching? Like why should I use React Query, SWR?
I have a video on RQ as well
You WILL want to watch another video on Fetching Data. Watch as many as you can because that will show you that there are other ways of doing things
Can you provide few links looks like you already seen some different ways
Really great keep going forward... But learning react in js not in type script
that's fine! Just ignore the types then! But it would be useful to just be familiar with it, so that when you eventually do go to typescript (you should), you'll be more familiar!
Can you make one video in react life cycles ?
Can you create a tutorial that shows the actual sql query that fetch records from database please.
A plain sql query and sql that uses views and stored procedure please
Thank you very much
probably not for a while, I am focusing on react at the moment!
I wish to play this sound when Eren meet Anni in all timelines
React Query makes this super easy
it does
What if we abort the request inside the cleanup function?
Yeah that's better!
please make a video about typescript, this new syntax sometimes shocks me
Will do!
What theme is this? Does anyone know?
Thank you in advance 🙏🙏
Material theme darker
@@cosdensolutions Thank you!!
21:38 abort control
Thank you, but why i take back two responses,? These responses are the same.
Maybe because you're in strict mode and React fires all useEffects twice
Yes, exactly. Thank you very much.
Which is better?
const fn = async() => {}
fn()
Or
(async(){})()
If you don’t care about type of error you should use unknown, not any
Bonsoir, What's your vscode theme please? :)
Material theme
Pls make your codes on JS. PLS
just ignore the types
TypeError: posts.map is not a function
{isLoading && Loading...}
{!isLoading && (
{posts.map((post) => {
return {post.title};
})}
)}
I like your video but got a big fat 👎 for as Posts[] antipattern. Should have at least mentioned that in real application you should validate the response a type safe schema library
Big shame it's written in typescript. Still, transferred it to js and this was a great tutorial. Liked. Subscribed.
No problem if you use JS, but my advice is to start thinking about TS because it will probably become the standard eventually!
As Darius has said, I too would recommend picking up TS and learning that, it really does help.
Hi, I am an Angular developor is learning react. I love the abortControllorRef best practice you used handle the api paging part that let the later fetch to cancel the conducting fetch, which works same as the higher order mapping operater switchMap() in Angular Rxjs.
I got one question here: there is another higher order mapping operater is concatMap() which is used to make sure that the later request always start after the previous request complete.
so In your case it would be like:
you increase the page to 2 (that will try to fatch the page 2 data) when the app is still loading the page 1,
result will be: "the page 2 request will always start after the page 1 request complete"
this can be useful for the case that the later request is depended on the previous reuqest.
is there any way to implement that in React?
Can i contact you personally? I've got a project I'd like to get some React expertise in order to set a cart onto Framer (via React)
by connecting shopify backend onto framer frontend (via embeded code)
Great content