Fetching Data in React - Complete Tutorial

[@cosdensolutions]

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

[@opyotusamuel]

😅😅😅😅😅😅

[@amritghimire4791]

😊

[@shya666]

Talking about race conditions for a language that is not even multi-threaded is wild. But a very well-made tutorial. Thank you.

[@craig1253]

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

[@mohamedsaed1558]

in my mind I was thinking that if I find a teacher teach me every piece of code, then I find you, you make code incredible easy, and completely for free, only teacher like you can only create channel you , I wish for you all the best

[@Securitywasted]

Best data fetching video in react i have ever seen. Expain every step in details Keep it up bro

[@betull7]

this channel single-handedly saves my life

[@KonstantinosKaminaris-xe8wt]

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

[@НикитаБурлаков-у8ш]

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

[@praulayar4805]

one of the best video on data fetching with vanilla data fetching

[@moviegift2492]

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.

[@webdev-tom]

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 💯

[@cosdensolutions]

thanks a lot! I hope so too!

[@madhavvankina5201]

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

[@reihane2325]

Thanks a lot for explain very clear. I saw lots of video in KZbin, but your explain is so helpful for me as a junior react typescript developer. Bon courage!

[@jellyfish1772]

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

[@KojoJohnson]

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

[@erikreyes6093]

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

[@cosdensolutions]

will do!

[@KarenDiaz-m6m]

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

[@iCeTainment]

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

[@cosdensolutions]

glad to hear it!

[@rishabhnegi9429]

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

[@lisalee7946]

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

[@ooorayooonyoooo]

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

[@shahnawazk]

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

[@ashsad521]

Thanks very much for that great video, very clear and organized

[@lilynn7777]

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

[@tigranharutyunyan7674]

Enthusiasm and knowledge! Thank you man

[@goodness776]

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

[@rellamwahid6392]

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

[@farhaannishtar786]

This guy is good. Thanks for making great content

[@djwooster]

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!

[@incarnateTheGreat]

Thanks for the Abort Controller solution!

[@tylerxx26]

Super stuff man. Please keep it up!🎉

[@kreten780]

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.

[@cosdensolutions]

yep, that's another way to do it!

[@hilkiahlavinier]

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

[@cosdensolutions]

Hmm not a bad idea tbh, will note it down!

[@vesa95]

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

[@cosdensolutions]

Yes! More videos to come! I'm currently on vacation so I've posted a bit less

[@2difficult2do]

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

[@cosdensolutions]

glad you found it useful!

[@wallethe1614]

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

[@cosdensolutions]

glad to hear it!

[@hamzapaskingakhtar]

This is pure gold

[@Pareshbpatel]

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

[@MaxMov-sp8hr]

One of the best! 👏

[@irfansaeedkhan7242]

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

[@TLTechbender]

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

[@jlogo80]

Awesome stuff, thanks!

[@helenasdiaries515]

Thanks ! You are a great explainer

[@mafterr11]

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

[@cosdensolutions]

actually posting that tomorrow :D. You're right, this is outdated, but still important if you're learning. You need to know and understand how to do this before moving on to RQ or server components

[@enedigodswill]

Exactly I'm facing the same issue too, I'm still a beginner and I really need help with it

[@frankdearr2772]

Great, thanks for all 👍

[@MikeTheCook]

Love it. You're the best.

[@Lidkovsky]

golden content.

[@ramirorenteria7333]

Awesome tutorial!

[@rajnishkushx]

Luv bro, from Bharat ❤

[@theMaroFlow]

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.

[@INetreba]

very good explanation!

[@DrivingScape]

Nice vid, thanks

[@dardaniaa0546]

React Query makes this super easy

[@cosdensolutions]

it does

[@Riflijones01]

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

[@shashwatgupta2184]

Can you provide few links looks like you already seen some different ways

[@TausifShekh-j5x]

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

[@cosdensolutions]

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!

[@TausifShekh-j5x]

@@cosdensolutions yes thats good idea

[@harag9]

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?

[@cosdensolutions]

Yeah that's another way to do it! And the RQ video has been up for a while already ☺️

[@harag9]

@@cosdensolutions Ahh cool, still working my way through the videos. :) Really enjoying them .

[@thisstory]

Love your videos

[@haroonkhan-dy9bt]

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

[@cosdensolutions]

Haven't gotten around to doing tutorials of actual features but yes, I will do! However I have already a tutorial on useContext 😁

[@memeMerge]

I really liked it 👍👍

[@Oshione-w9c]

excellent video very imformative guy

[@haiderjaafer8164]

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

[@cosdensolutions]

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!

[@aswineepratihari7897]

21:38 abort control

[@BLUEGAMER26]

You’re an angel, I was looking for this

[@garikmelqonyan6011]

Good job!

[@erikreyes6093]

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

[@cosdensolutions]

probably not for a while, I am focusing on react at the moment!

[@jay-kv6wn]

Great content

[@aggranular]

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

[@piotrszczesniak]

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?

[@cosdensolutions]

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

[@piotrszczesniak]

@@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 :)

[@haiderjaafer8164]

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

[@cosdensolutions]

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!

[@joshuac9142]

Perfect!

[@AkbarAli-bt7xi]

thanks sir

[@capt_vj]

awesome !

[@СандугашАхметжанова-п5ф]

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

[@cosdensolutions]

Will do!

[@hameeeed5992]

Thanks

[@abdalghanialbiek8999]

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

[@MuhammadWaqas-eb1uu]

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

[@richardleungwoogabriel9317]

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

[@cosdensolutions]

it should work, or just manually go to discord.cosdensolutions.io

[@JonathanKila]

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

[@cosdensolutions]

I have a video on RQ as well

[@abhinasregmi9742]

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

[@cosdensolutions]

yes it would, it's actually better!

[@maryambibi9687]

Can you make one video in react life cycles ?

[@MarkDavid-so9up]

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

[@apoorvgupta9680]

we can also return request.abort

[@EzekielOladejo-f1u]

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

[@cosdensolutions]

Material theme darker

[@EzekielOladejo-f1u]

@@cosdensolutions Thank you!!

[@faisalhussain7008]

What if we abort the request inside the cleanup function?

[@cosdensolutions]

Yeah that's better!

[@kkatsavaros]

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

[@cosdensolutions]

Maybe because you're in strict mode and React fires all useEffects twice

[@kkatsavaros]

Yes, exactly. Thank you very much.

[@aggranular]

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

[@sehlanarslan1792]

[@AyushManShrestha]

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

[@bidsouravbest]

Pls make your codes on JS. PLS

[@cosdensolutions]

just ignore the types

[@ABDULLAHKHALID-ix6db]

[@marcrichet2626]

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

[@sumeettiwari4060]

Material theme

[@rodriruiz7654]

Stop trying to make fetch happen!!

[@brandonhopkins3438]

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

[@cosdensolutions]

No problem if you use JS, but my advice is to start thinking about TS because it will probably become the standard eventually!

[@harag9]

As Darius has said, I too would recommend picking up TS and learning that, it really does help.

[@josepdevillaret]

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)

[@josepdevillaret]

by connecting shopify backend onto framer frontend (via embeded code)

[@Anilsinghchd]

Great content