Full React Tutorial #17 - Fetching Data with useEffect

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/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@amanpreetsinghbawa1600]

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

[@Jmendiola]

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!

[@86Illa]

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

[@once-upon-a-time-7]

i love you :)

[@equim7363]

@@once-upon-a-time-7 no simping please

[@freeyourmind7538]

​@@equim7363 I love you 💓

[@CarlosSGonzalezV]

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.

[@aliaksandrhn1]

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

[@KingstonFortune]

thanks for this tip! glad I took a glance at the comments and found yours as number 1

[@pratyushpurohit]

He could but his point was to teach us a new concept. Glad he didn't use []

[@ziaurrahman9529]

thanks!

[@seclvded]

damn, u da mvp. but i also like how he explained it (in case u run to his exact problem)

[@kavinsanthosh1306]

yeah bro. but why it is not preventing the rendering of blog list. when theoritcally it should?

[@rafiashan8389]

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

[@conan_ft]

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

[@NetNinja]

Thank you so much! :)

[@tomaszswiatek4612]

yep i agree:), and I'm still up to date with this awesome n1 tutorial :)

[@melancholicmuse]

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

[@googleaccount7252]

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.

[@yangliu3754]

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.

[@nikokalandadze9675]

Thank you, king behavior

[@DigitalMonsters]

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.

[@karanparmar4318]

True, But I think he did this purposefully to make us understand about conditional rendering.

[@reactdev7871]

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

[@defaultdefault812]

Need to be careful that no .length method is evaluated.

[@sabinoramirez2600]

problem with this approach is the title will display even if the array is empty. This looks ugly in real world application

[@ericmomoh7927]

@@reactdev7871 please can I see the code on how you made the search bar?

[@xinglingoriginal5428]

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

[@NetNinja]

Aha, thanks for the lovely comment :) and for watching!!

[@user-ct5oo3do7b]

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

[@samirprasla1770]

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

[@NetNinja]

Thank you so much! 😃

[@ayushdudhani]

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

[@user-lh1hr5bp9n]

axios is way better and simplier than using fetch() function for me

[@towseefahmed6328]

ur simply excellent ... explanation is outstanding... thanks a lot for this excellent content

[@maskman4821]

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

[@CodeRCreatives]

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

[@youngun550]

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

[@parthdesai9751]

at this point, you could probably ask chatgpt

[@samtakahashi5602]

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!

[@gorkemgok9313]

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

[@NetNinja]

[@madannikalje760]

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

[@ScottRocke]

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

[@princearthur5532]

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

[@NetNinja]

Great to hear :) thanks Prince!

[@Eldalion99999]

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

[@henrydinh285]

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

[@andrewpenny1285]

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!

[@olorundareagnes934]

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

[@azeezalsafadi901]

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

[@NetNinja]

You're very welcome Azeez! :)

[@akashnegi913]

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

[@eylemgokdemir]

BEST json server tutorial. THANK YOU!

[@jennifermagpantay7933]

Great tutorial!! After a few minutes watching it I found out a solution for a bug! Brilliant!

[@staplepin8099]

Best teacher

[@martiananomaly]

The use of && was pretty smart.

[@AlDasturchi]

The most useful account ever

[@filmbotreviews]

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

[@NetNinja]

Glad it helped :)

[@bobhammell6308]

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

[@RameenFallschirmjager]

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!

[@NetNinja]

Thanks so much Rameen :)

[@RameenFallschirmjager]

@@NetNinja Anytime my master ninja!

[@anony4142]

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 ?

[@vidmis224]

You are life saver mate!!

[@NuclearAmouri]

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

[@AbrahamWilson]

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.

[@levantinian02]

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

[@jerrerock]

thank you sir! You helped me a lot.

[@billpapas3054]

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

[@RodRavenpictures]

The goat. (period)

[@johnsmith-oy9kx]

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

[@monson2048]

Amazing content! Love your explanations!

[@elora2334]

Thank you, its so clear with your explain !

[@rogeclash2631]

many thanks for this , it is very clear

[@NetNinja]

Thanks Roge. Glad to hear that!

[@rahulsriram6295]

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

[@maskman4821]

cool !

[@KehindeEnirayetan]

I used both approach but was unable to see any blog displayed.

[@sheeshaliosama5837]

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

[@fatihkaya6817]

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

[@JayPatel-qh1ux]

did you get the answer??

[@KerishaStewart]

Your videos are amazing!

[@NetNinja]

Thank you so much! :)

[@Pupu._]

clear explanation as always! :)

[@Anon23-d]

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'

[@Rose-93]

Thank you fo such a clear explanation :)

[@amjadaliafridi1023]

it has been a superb journey so for

[@NetNinja]

Awesome to hear that Amjad!

[@olgapolskolg1112]

Thanks a lot, you helped me to solve a problem

[@Ishant56]

Wow amazing Tutorial Thank You ❤️

[@dineshrout2527]

Love the way you teach 🙏

[@LorandPalfalvi]

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

[@Dgrayfit]

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.

[@andrewpenny1285]

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.

[@sirusThu]

Amazing explanation. thanks

[@khedubaba]

Pure and sweeet knowledge.

[@Doimaixinhtuoi]

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

[@x9wozz]

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

[@maskman4821]

If you are new to react, just learn hooks, always go with the latest technologies !

[@x9wozz]

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

[@nenadbenke9834]

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.

[@KehindeEnirayetan]

Hello please I used the “empty array” approach and “null” approach but none worked. No blog was displayed on screen. Any hint with this

[@nerdiloo9863]

"Maann, you are Metacmucil" 🔥🔥🔥

[@mohammadawais163]

Excellent Explanation❤

[@LoveisHell85]

Amazing content. Thank you so much.

[@teetphum]

Thank you so much!! you save my web app

[@nuke7]

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

[@PapsOSk19]

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

[@akeymthedream]

I think you can do so by using props to access blogs and then mapping the props in the BlogList component

[@sdrplk]

Shaun, just curious how you prepare, compile and present videos. your workflow. you seemed to well prepared, I wonder how the hell he does it, maybe a time traveler??. a video on behind the seens?

[@NetNinja]

Haha, I wish I could time travel. I spend just as much time planning (if not more) as I do recording... Course notes, course files, slides etc are all made prior to recording anything :). Maybe one day I'll do a 'day in the life' video and show my methods :)

[@lasindunuwanga5292]

@@NetNinja yes please. It will be an inspiration

[@PythonicPath1]

@@NetNinja yes that would help a lot

[@drhastings]

@@NetNinja Will highly appreciate that😅

[@maxbisceglie1682]

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

[@jonaskarl]

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

[@satishganesan54]

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?

[@shawnshaw9859]

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

[@AngryBacteria]

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

[@alexhungerford]

great summary at 6:39

[@GiancarloCarccamo]

great video man

[@bumpty9830]

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(); }

[@skipper3204]

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?

[@RahulSharma-ph2zn]

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.

[@Bashir3675]

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?

[@jumbo999614]

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.

[@bananabread6758]

excellent video

[@adventurer2395]

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

[@oleksiik4473]

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

[@Se.mu01]

Just what I needed

[@mdkarim831]

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.

[@karolxbt8678]

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

[@alexandrudorultan9001]

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

[@shehrozkhan7335]

{blogs && } i m still getting error msg

[@ajaykumarpulletikurthi2558]

You are the God

[@bartekk6480]

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

[@huntershub3030]

!!!!!!!!!!!!!!!!!!!THANK YOU!!!!!!!!!!!!!!!!!

[@a.i.v7306]

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

[@drifung]

thanks for the tutoriel