Fetching Data in React - Complete Tutorial
HTML-код
- Опубликовано: 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"
I like that you state the basics of fetching data instead of only (how to) , so thanks a lot for your help
Been stuck learning react for months and now I found this gem of a channel. Keep it up bro!
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.
bro you are always just straight to the point. Thanks Man!
one of the best video on data fetching with vanilla data fetching
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!
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
Your channel is gonna pop off. Your content is top-notch 💯💯
I aspire to one day be able to teach people like you do. This is really high quality teaching my friend. Respect.
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 am just obsessed with your videoes ... great work 😀
Just when i saw you were using typescript I knew this would be a great tutorial. great video❤
Thanks a lot for explain very clear. I saw lots of video in RUclips, but your explain is so helpful for me as a junior react typescript developer. Bon courage!
Enthusiasm and knowledge! Thank you man
Best instructor!! Thank you for such great content!!💯
I just subscribed 🎉
Love your videos man! It’s helping me with my internship projects
glad to hear it!
Super stuff man. Please keep it up!🎉
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!
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!
Thanks for the Abort Controller solution!
One video to like and subscribe! Really helpful and informative. Thanks and keep it up.
Awesome vid im learning alot, thank you and keep it going.
glad to hear it!
Awesome tutorial!
Thanks so much, you just helped me out big time!
This guy is good. Thanks for making great content
One of the best! 👏
This is pure gold
Never seen a lean step by step explanation. You are indeed a masterpiece @webdev-tom💯
Thanks ! You are a great explainer
very good explanation!
This is very interesting video, exactly what I looking for. Thank you. Like
glad you found it useful!
Love it. You're the best.
golden content.
I really liked it 👍👍
Great content
excellent video very imformative guy
Love your videos
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 ).
Good job!
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!
awesome
!
Perfect!
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
Thanks
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!
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
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
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 😁
Can I use hook useloader as async fucntion to fetch api data. That is optimize way and performance application increase.
21:38 abort control
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!
React Query makes this super easy
it does
If you don’t care about type of error you should use unknown, not any
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!
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
Can you make one video in react life cycles ?
I wish to play this sound when Eren meet Anni in all timelines
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 :)
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!
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!
please make a video about typescript, this new syntax sometimes shocks me
Will do!
What if we abort the request inside the cleanup function?
Yeah that's better!
What theme is this? Does anyone know?
Thank you in advance 🙏🙏
Material theme darker
@@cosdensolutions Thank you!!
Which is better?
const fn = async() => {}
fn()
Or
(async(){})()
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.
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