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
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
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 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.
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!
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
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
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 ).
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!
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.
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 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)?
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
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!
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.
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
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?
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 :)
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
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!
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
![ReactJS Course [7] - How To Fetch Data From an API in React](/img/n.gif)
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!
Talking about race conditions for a language that is not even multi-threaded is wild. But a very well-made tutorial. Thank you.
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
Best data fetching video in react i have ever seen. Expain every step in details
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
this channel single-handedly saves my life
I aspire to one day be able to teach people like you do. This is really high quality teaching my friend. Respect.
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!
Your channel is gonna pop off. Your content is top-notch 💯💯
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.
one of the best video on data fetching with vanilla data fetching
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!
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!!💯
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
One video to like and subscribe! Really helpful and informative. Thanks and keep it up.
I just subscribed 🎉
Love your videos man! It’s helping me with my internship projects
glad to hear it!
Just when i saw you were using typescript I knew this would be a great tutorial. great video❤
I am just obsessed with your videoes ... great work 😀
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
Thanks very much for that great video, very clear and organized
This guy is good. Thanks for making great content
Enthusiasm and knowledge! Thank you man
Never seen a lean step by step explanation. You are indeed a masterpiece @webdev-tom💯
bro you are always just straight to the point. Thanks Man!
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
Thanks for the Abort Controller solution!
Awesome vid im learning alot, thank you and keep it going.
glad to hear it!
Awesome stuff, thanks!
This is very interesting video, exactly what I looking for. Thank you. Like
glad you found it useful!
Thanks so much, you just helped me out big time!
One of the best! 👏
Great, thanks for all 👍
Awesome tutorial!
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 ).
This is pure gold
Love it. You're the best.
Data Fetching in React, so clearly explained. Thanks, Darius.
{2024-08-27}
very good explanation!
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!
God bless your soul I was almost cooked at work
Thanks ! You are a great explainer
Nice vid, thanks
Luv bro, from Bharat ❤
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!
I really liked it 👍👍
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 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
excellent video very imformative guy
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
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
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!
Good job!
Great 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
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
React Query makes this super easy
it does
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 sir
21:38 abort control
You’re an angel, I was looking for this
Perfect!
Outdated, since useEffect isnt really recomended for fetching anymore. Better ways to do it. Would love to see an updated video of this :)
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
Exactly I'm facing the same issue too, I'm still a beginner and I really need help with it
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 😁
What theme is this? Does anyone know?
Thank you in advance 🙏🙏
Material theme darker
@@cosdensolutions Thank you!!
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!
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 .
Thanks
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 :)
awesome
!
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!
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
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 I use hook useloader as async fucntion to fetch api data. That is optimize way and performance application increase.
Any resource on data fetching and caching? Like why should I use React Query, SWR?
I have a video on RQ as well
If you don’t care about type of error you should use unknown, not any
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!
I wish to play this sound when Eren meet Anni in all timelines
Can you make one video in react life cycles ?
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.
we can also return request.abort
Which is better?
const fn = async() => {}
fn()
Or
(async(){})()
Bonsoir, What's your vscode theme please? :)
Material theme
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
TypeError: posts.map is not a function
{isLoading && Loading...}
{!isLoading && (
{posts.map((post) => {
return {post.title};
})}
)}
Pls make your codes on JS. PLS
just ignore the types
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.
Stop trying to make fetch happen!!
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