Full React Tutorial #17 - Fetching Data with useEffect 

I can't believe someone can explain this well in such a short video. Ninjas were always my favs since childhood.

The best part of tutorials is you have them backed by the course files. Very well managed.

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!

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

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( [] );

I love all your tutorials, you explain it all so clear!

This course is my first introduction to React and i'm enjoying the lessons so much

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.

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.

I can't believe you explain so clear and easily to understand, I'm so glad you exist =). Thank you man

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

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

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.

Async version: useEffect(() => { async function fetchBlogs() { let response = await fetch('localhost:8000/blogs'); response = await response.json(); setBlogs(response); } fetchBlogs(); }, []);

You are really very awesome teacher very nicely explained all the concepts of reacts.

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

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

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!

Wow you are great at explanations i have tried several tutorials but this tops it.

Thank you for the clear and concise video. Definitely helped unblock some brain cells.

Man you deserve a prize or something as the best youtube code teacher.

OMG! Glad i saw this video. The logical && solved my problem i had for days as im learning react and hooks. Thanks Shaun ❤

I must say that you are a superb teacher. Well done Shaun!

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

BEST json server tutorial. THANK YOU!

Your Videos are right on Time So are we , Thank You :)

I learned a million things from this lesson Thank you The Net Ninja!!

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!

Best teacher

Very consise tutorials, great for picking up the concepts. Thank you!

Thanks so much for this video, helped me with the problem I was having.

The most useful account ever

5:15 Couldn't we just initialize `blogs` to an empty array? const [blogs, setBlogs] = useState([]);

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 ?

You are life saver mate!!

The use of && was pretty smart.

What a god explanation and teach!!!!! Adtonishing buddy!! Ty

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

The goat. (period)

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!

Thank you, its so clear with your explain !

Amazing content! Love your explanations!

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'

thank you sir! You helped me a lot.

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.

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

Pure and sweeet knowledge.

clear explanation as always! :)

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

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

Amazing explanation. thanks

many thanks for this , it is very clear

Wow amazing Tutorial Thank You ❤️

Thank you fo such a clear explanation :)

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

Thanks a lot, you helped me to solve a problem

If you take the initial value as Empty array instead of null, it works too

Your videos are amazing!

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.

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

it has been a superb journey so for

Thank you! I would have loved it if you would have used async/await instead of then. Almost nobody uses .then anymore.

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

In stead of initializing the blogs state with null value, is it ok to use an empty array?

It keeps calling get request with useState. I just did it with fetch inside useEffect. By the way Shaun's way of teaching is the best for me.

Great tutorial, thanks. I have just one question, how do you fetch it and map it inside the same component?

Very good Playlist! Thanks. Is there a way, I can read and manipulate the blogs state in multiple components?

Amazing content. Thank you so much.

Thank you so much!! you save my web app

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?

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?

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

first time when blogs was checked and it's null, what will happen, will it be rechecked regularly until it becomes non-null?

I got CORS errors trying to follow this. You might think about adding a note, or maybe even a short tutorial video, about dealing with this. I had success after adding a --middlewares flag to the json-server run, pointing to a json file with the following contents: module.exports = (req, res, next) => { res.header('Access-Control-Allow-Origin','*'); next(); }

great video man

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.

How is res.json() async? Doesn't make sense, as it is already the result of an async response.

Hi, great job, thank you for your work! In this course, in a feature we see Redux?

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?

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.

Just what I needed

great summary at 6:39

"Maann, you are Metacmucil" 🔥🔥🔥

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.

{blogs && } i m still getting error msg

Loading data/db.json Oops, data/db.json doesn't seem to exist Creating data/db.json with some default data when I tried to install json package can you help please to fix this issue thank you

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

So clean

Perfect my friend!

thanks for this video

thanks so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!

does this tutorial talk about the latest version of ReactJS (17) ?

Starting from React 18, which is from 2022 onwards, it is not recommended to use useEffect for fetching data.

@thenetninja why you are using .then instead of await in this video for fetching data please explain i am watching this tutorial this is little bit confusing to me

excellent video

Hi, I have the exact same code as you (I even tried downloading your GitHub repo) on my Mac, but I keep getting this error and I can't seem to solve the problem. Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Can you please help me fix this? I really want to progress on this course.

6:35 in there what if I used tTernary operation?

The code didnt work because 'blogs' was not yet populated, i get this, as the call to get blogs is asynchronous...but how does adding ' blogs &&' solve the problem, how does this code ensure blogs is notl null by the time it is evaluated ???..this is the part i dont understand if anyone can explain ?? Thanks!!