Fetching Data in React - Complete Tutorial 

Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc

Been stuck learning react for months and now I found this gem of a channel. Keep it up bro!

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

this channel single-handedly saves my life

Best data fetching video in react i have ever seen. Expain every step in details 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.

I aspire to one day be able to teach people like you do. This is really high quality teaching my friend. Respect.

I just subscribed live from Ghana West Africa, you teach very clean and straight fwd learned alot from you the least i can do is sub

bro you are always just straight to the point. Thanks Man!

Your channel is gonna pop off. Your content is top-notch 💯💯

I just subscribed 🎉 Love your videos man! It’s helping me with my internship projects

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

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

Thanks a lot for explain very clear. I saw lots of video in RU-vid, 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

One video to like and subscribe! Really helpful and informative. Thanks and keep it up.

Just when i saw you were using typescript I knew this would be a great tutorial. great video❤

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

Best instructor!! Thank you for such great content!!💯

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)?

I am just obsessed with your videoes ... great work 😀

Love this explanation! May I suggest that you perhaps get a pop filter or somehow edit the audio (probably some quick AI solution) because every time you pronounce a 'p' sound it's loud af in my headphones lol but I LOVE the video!

Great, thanks for all 👍

Never seen a lean step by step explanation. You are indeed a masterpiece @webdev-tom💯

Enthusiasm and knowledge! Thank you man

Thanks for the Abort Controller solution!

Awesome vid im learning alot, thank you and keep it going.

This is very interesting video, exactly what I looking for. Thank you. Like

Thanks so much, you just helped me out big time!

This guy is good. Thanks for making great content

So useState is the Post a class previously you created so it here generic... Hope to clarify that... Thank

again with the ooint the more seniors I talked to they said don't use useEffect for API calls because first UI is rendered then useEffect runs, so its like render first then fetch data, but if you use rtk query it fetch first and then re render so UI comes with no glitch also it cache ur data, so useeffect sometimes causes too many renders issue if not done right, specially API calls is not recommended , in your react project course have you done API call same in useEffects or you have done them in differently ways as well ? i am planing to purchase it because the way you explain things is perfect

Awesome stuff, thanks!

Super stuff man. Please keep it up!🎉

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

Hi, this is amazing video i learn a lot, but wondering if in this code implementation need to add clean up function or this code is full correct and clean up not required.

Thanks ! You are a great explainer

Data Fetching in React, so clearly explained. Thanks, Darius. {2024-08-27}

Fire man! 🔥 I’ve wait for you to post!

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.

One of the best! 👏

This is pure gold

very good explanation!

Love it. You're the best.

21:38 abort control

Outdated, since useEffect isnt really recomended for fetching anymore. Better ways to do it. Would love to see an updated video of this :)

Awesome tutorial!

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

thanks sir

golden content.

please make videos on doing project. your channel is growing since last time i commented doing great keep it up i am your subscriber

Luv bro, from Bharat ❤

excellent video very imformative guy

React Query makes this super easy

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?

Can I use hook useloader as async fucntion to fetch api data. That is optimize way and performance application increase.

Hey great tutorials will do a context api tutorial with fetching data and adding a cart functionality etc?

Great content

I really liked it 👍👍

Love your videos

Perfect!

we can also return request.abort

What theme is this? Does anyone know? Thank you in advance 🙏🙏

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?

I was wondering if we could add signal aborting in cleanup for useEffect instead at the top 🤔🤔 Will this work??

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

Really great keep going forward... But learning react in js not in type script

If you don’t care about type of error you should use unknown, not any

Good job!

I wish to play this sound when Eren meet Anni in all timelines

Thanks

Any resource on data fetching and caching? Like why should I use React Query, SWR?

Nice vid, thanks

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

What if we abort the request inside the cleanup function?

Which is better? const fn = async() => {} fn() Or (async(){})()

Thank you, but why i take back two responses,? These responses are the same.

Can you make one video in react life cycles ?

please make a video about typescript, this new syntax sometimes shocks me

awesome !

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

Pls make your codes on JS. PLS

TypeError: posts.map is not a function {isLoading && Loading...} {!isLoading && ( {posts.map((post) => { return {post.title}; })} )}

Bonsoir, What's your vscode theme please? :)

Big shame it's written in typescript. Still, transferred it to js and this was a great tutorial. Liked. Subscribed.

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)

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?

Great content