Full React Tutorial #17 - Fetching Data with useEffect
HTML-код
- Опубликовано: 7 янв 2021
- Hey gang, in this React tutorioal we'll see how to make a fetch request for data using the useEffect hook.
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
Async version:
useEffect(() => {
async function fetchBlogs() {
let response = await fetch('localhost:8000/blogs');
response = await response.json();
setBlogs(response);
}
fetchBlogs();
}, []);
Bro you're a life saver, I am a bootcamp student who almost quit because I can't keep up with react, now here, I am getting hope to continue, I press like and watch all the ad to show my support to your channel, please stay awesome sir, God bless!
The best part of tutorials is you have them backed by the course files.
Very well managed.
5:40 You could have easily corrected the error by using an empty array rather than null as an initial state: const [blogs, setBlogs] = useState( [] );
thanks for this tip! glad I took a glance at the comments and found yours as number 1
He could but his point was to teach us a new concept. Glad he didn't use []
thanks!
damn, u da mvp. but i also like how he explained it (in case u run to his exact problem)
yeah bro. but why it is not preventing the rendering of blog list. when theoritcally it should?
Man thanks so much! You won't believe how many days I've been searching how to do this, finally I got to your playlist and I'm gonna watch it from the beginning to properly learn React again.
Tip for those struggling, make sure that you have two terminals running, one for react the other for db. and make sure you .db file is saved.
This course is my first introduction to React and i'm enjoying the lessons so much
Thank you so much for this course! Your way of explaining is extremely clear - I have used React for a while now, but at times things still get confusing. You make everything extremely clear :)
i love you :)
@@once-upon-a-time-7 no simping please
@@equim7363 I love you 💓
Set blogs initial state to an empty array if you don't want to have to conditionally render with the double ampersand. Since an empty array is still a valid map object.
True,
But I think he did this purposefully to make us understand about conditional rendering.
I was just gonna say that good job buddy as I made a real blog with an API here and made a search box on the navbar that can search and filter the blogs so was confused with this null issue so I find out that using empty array fix the issue :D
Need to be careful that no .length method is evaluated.
problem with this approach is the title will display even if the array is empty. This looks ugly in real world application
@@reactdev7871 please can I see the code on how you made the search bar?
I love all your tutorials, you explain it all so clear!
Thank you so much! :)
yep i agree:), and I'm still up to date with this awesome n1 tutorial :)
THIS.
Was working on an Update/Edit function to finish off this series and was stuck for a few hours wondering why my data properties were returning null...
Thank you for this fantastic course!
I must say that you are a superb teacher.
Well done Shaun!
Great solution to deal with the null!
After the data is fetched and the setBlogs is invoked, React re-renders the whole component, and this is why when the blogs value changes the (blogs && ) part runs again.
Thank you, king behavior
OMG! Glad i saw this video. The logical && solved my problem i had for days as im learning react and hooks. Thanks Shaun ❤
Thanks alot !
I was using axios while getting data!!
It was for my hackathon,
used same way as you shown!!
it worked!!
THANKS ALOT MAN !!!!!!
ur simply excellent ... explanation is outstanding... thanks a lot for this excellent content
You are really very awesome teacher very nicely explained all the concepts of reacts.
You solved a problem for me that has been very discouraging. I forgot to set initial stage to null and also forgot about the conditional rendering. I was getting the error about mapping over an undefined array. Thank you again and again!
Great tutorial!! After a few minutes watching it I found
out a solution for a bug! Brilliant!
BEST json server tutorial. THANK YOU!
Thank You so much for your such hard work on all of your tutorial videos, you are very polite and honest teacher !! too the point tutorials all of them are very well explained....!!
Thank you so much! 😃
Thank yoy Shaun for this tutorial, I have learned a valuabke lesson which is conditional template, now I finally understand why and how { blogs && } works, it feels so good to comprehend the reason behind this !!!
Thank you for the clear and concise video. Definitely helped unblock some brain cells.
Amazing content! Love your explanations!
Very consise tutorials, great for picking up the concepts. Thank you!
Thank you so much this helped me alot ngl I was stuck in that error for long time I wasn't able display my fetch data
Your Videos are right on Time
So are we , Thank You :)
Man you deserve a prize or something as the best youtube code teacher.
I would absolutely love it if you did a brief tutorial on how to externalise an async await code block. I've managed something close, but I still want to abstract away.. Thanks for the awesome content! Really enjoy your videos, by far the most helpful I've come across :P
at this point, you could probably ask chatgpt
What a god explanation and teach!!!!! Adtonishing buddy!! Ty
Dude your tutorials are excellent, seriously enjoying the content. Could you please make a course where you show how to make CRUD apps using the MERN stack.
single most useful react video in whole youtube......do you have any idea how long it took me to find all these different pieces of information condensed in this video ??? Especially the 2x .then part....jezus the things I tryed to achieve that. I wish I had this 6 months ago.....
Thank you, its so clear with your explain !
I learned a million things from this lesson
Thank you The Net Ninja!!
You're very welcome Azeez! :)
The most useful account ever
clear explanation as always! :)
Hi, great job, thank you for your work! In this course, in a feature we see Redux?
Very good Playlist! Thanks.
Is there a way, I can read and manipulate the blogs state in multiple components?
You are life saver mate!!
Wow you are great at explanations i have tried several tutorials but this tops it.
Great to hear :) thanks Prince!
Love the way you teach 🙏
Hey! I found this video very late after i stepped into development . I wish i found about this channel earlier. Thank you so much for providing this great information. Also, we set the initial state for the blog data as 'null' . Could we use an empty array for that as well ? That way , i didn't get the error 'cannot read map of null'
Amazing explanation. thanks
Amazing content. Thank you so much.
Wow amazing Tutorial Thank You ❤️
The goat. (period)
Best teacher
Pure and sweeet knowledge.
The use of && was pretty smart.
Thank you fo such a clear explanation :)
In stead of initializing the blogs state with null value, is it ok to use an empty array?
Thanks so much for this video, helped me with the problem I was having.
Glad it helped :)
Thanks a bunch for these tutorials! Do you think you could show how to properly implement google OAuth 2.0 in a reactjs app? I have done an implementation but it looks very incorrect especially my redirect part.
Excellent Explanation❤
Your videos are amazing!
Thank you so much! :)
Just what I needed
Thanks a lot, you helped me to solve a problem
Perfect my friend!
Thank you so much!! you save my web app
many thanks for this , it is very clear
Thanks Roge. Glad to hear that!
Thanks for the explanation, but I have a simple question why we did not use asynchrounous function so we won't render anything till the blogs are returned from the fetch ?
great video man
So clean
thanks for the tutoriel
Shouldn't the component update after blogs is updated without the conditional rendering? I thought the state variables were reactive... I'm a bit confused sorry
Thanks for the series.
Question here: Why the blogs didn't get set to the value being returned from the fetch? Shouldn't the return statement wait until the fetch function finishes since it uses promises and everything should wait till it finish its work? And like that the value of blogs wouldn't be null. I want explanation to what happened :)
great summary at 6:39
"Maann, you are Metacmucil" 🔥🔥🔥
excellent video
thanks so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I now know how to only display something when the useFetch has the data from the json server. But how would I go about only doing a certain action if the json object is loaded? For example I only want to fill an array once the data is loaded but I dont know how to do it
Great tutorial, thanks. I have just one question, how do you fetch it and map it inside the same component?
I think you can do so by using props to access blogs and then mapping the props in the BlogList component
Can't wait for more :D
Also will you explain why we ended up using hooks instead of class components? I suppose it's because of things like mentioned before useEffect hook and more. Though I'm neither familliar with react class components so I don't know if I'm not wrong here
If you are new to react, just learn hooks, always go with the latest technologies !
@@maskman4821 but the thing is that most companies still use things that were written before hooks update and that's often the case that you have to deal with legacy-ish code. That's why learning class components is relevant for me, since I'm aiming to transfer from just being frontend dev to react dev*.
*from what I've noticed there's a lot more of corpo work as frontend dev than actual programming as react dev if that makes sense.
I know this comment is the most irrelevant comment ever, but I couldn't help myself! I was watching your Vue udemy course and I reached the section that you were teaching how to emit events. I am familiar with this concept, because I learnt it when I was studying game development with godot engine. I got so excited for this "flash of enlightenment!" that I needed to show my gratitude somehow! This incident proves that it's important to expand your knowledge and how knowing some stuff in other areas helps to solidify your skills and knowledge as a whole. And I suggest everybody does it, I mean to try various stuff, it's good for your health!
Thanks so much Rameen :)
@@NetNinja Anytime my master ninja!
!!!!!!!!!!!!!!!!!!!THANK YOU!!!!!!!!!!!!!!!!!
it has been a superb journey so for
Awesome to hear that Amjad!
I'm wondering why would you use null as initial state of blogs. For me it works when initial state is empty array so it doesn't throw an error at the start. Any help?
first time when blogs was checked and it's null, what will happen, will it be rechecked regularly until it becomes non-null?
Excuse me if I'm asking too much, please do a 'react native 2021' tutorial in 'net ninja' style, it will help us a lot. I know there are a lot of react native courses out there but we like it in net ninja style - simple, sharp and comprehensive. PLEASE...
I did the same thing you did but it keeps giving me errors ('blogs.map is not a function') and (Failed to execute 'json' on 'Response': Illegal invocation) can you explain the problem and how to solve it please
could you show how do we implement fetching data in backend and passing the data via Express routes to frontend? This would be very helpful simple full stack implementation
did you get the answer??
Thank you!
I would have loved it if you would have used async/await instead of then.
Almost nobody uses .then anymore.
thank you a lot
You are the God
How are you using react with regular .js files? I get errors on all my return code for my compnents when I try doing that. I have to have them be .jsx. Well Im using typescript so tsx
can we have multiple use effect in a component?
setBlogs method? Where did you initiate that method?
thanks a lot!
:)
does this tutorial talk about the latest version of ReactJS (17) ?
life saver 😭
As you said it takes some time for the data to be fetched, that is why it is not available initially. But how using && is making the data available ? or is it taking some time until the the data gets fetched? Can somebody explain?
5:15 Couldn't we just initialize `blogs` to an empty array?
const [blogs, setBlogs] = useState([]);
helpful video
after fetching api with useEffect when i reload the page on the browser. there is an error like,
the initial state of the post is [ ] (a blank array).
useEffect is call after the render. so the setPost can change the state later.
and map function on a blank array is not possible.
How come useQuery and usePaginatedQuery not included in this series?
I know there is another tutorial series about useQuery. But the package is updated and the code taught in that series no longer work with new version.
Hi!!!... I am facing problem while fetching data , getting errors like err connection refused and am finding it hard to get solution in web and also I have faced issue in watching the json data after global installaton like running scripts is not allowed in this system..could you please reply?
In regards to the 6:00 minute mark. So the idea with the {blogs && ... } code here is that because we have initially set the state of blogs to be null we will initially get blogs to evaluate as false, so the logical && won't fire since both conditions must be true. However, we 'react' to the new render by updating the state of blogs in the useEffect() hook, which then makes blogs evaluate to true and our component evaluate to true. I think I am following, but if anybody can spot a gap in my understanding please jump in.
You are correct, but the conditional rendering wouldn’t be so important if it wasn’t for the map method being called on the data in the other component. Mapping over undefined data will throw an error and the app will fail to load anything at all. Basically, we are waiting until the data has arrived before we start trying to pass it around or render it.
thx !!
I see the promise on line 15 here, but the next .then does NOT work.
I see the values inside the promise object - HOW DO I GET THEM OUT of there?!
(no matter what dependency array I use...)
If you take the initial value as Empty array instead of null, it works too
cool !
I used both approach but was unable to see any blog displayed.