React Hooks Tutorial – 12 – Fetching data with useEffect Part 1
Video Title: React Hooks Tutorial – 12 – Fetching data with useEffect Part 1
Welcome back everyone by now you all should have a good understanding of the state and effect hubs in this video let’s apply that acquired knowledge to see how to fetch data from an API endpoint one point you should know though is in the future a new feature
Called suspense would be in charge for data fetching nevertheless using the state and effect hooks to achieve the same is a great way to solidify your understanding of those hooks alright then let’s begin the first step is to install the Axios package you could use the fetch API but I prefer Axios for
Data fetching so in the project folder run the command npm install Axios once the command completes the package should be present in your package dot JSON Axios alright next let’s proceed with our component I’m going to create a new file called data fetching dot j s
Within the file I’m going to use the snippet RFC II to create a function component next let’s add our imports we need u state and use effect from react and also Axios the next step is to fetch the data for that we are going to be using JSON
Placeholder in the browser navigate to http jason placeholder dot type ecoute or type a code comm and if you scroll down you see resources the first end point gives us access to a hundred posts if you click on the link you can see the
JSON data the URL is the URL we need to make a get request to in order to fetch this data let’s go back to vs code and fetch this array of posts first we are going to create a new state variable Const posts come up set posts is going
To be equal to you state and we initialize posts to an empty array now let’s create our effect to fetch the data from the URL endpoint use effect accepts an arrow function within the function we make our get requests using axials so Axios dot get accepts the URL which
Is from jason placeholder and the get request returns a promise inside then block let’s simply load the response and in the catch block let’s log the error if there was any the final step is to render the list of posts in the browser so I’m going to create an
Unordered list and we are going to map over posts and for each post we are going to return list item where the key is going to be equal to post dot ID and the inner HTML is going to be post dot title all right let’s include this component in AB guess
And test it out if you now head to the browser and take a look at the console you can see that we have a response and the data property on the response contains the array of posts nothing is rendered in the screen though since we are not setting the
State let’s do that now back in vs code in data fetching Jess right after logging to the console the response object we call set posts passing in response dot data this will update the posts state variable which will then be rendered in the UI let’s save this and take a look at the
Browser you can see that the post titles are now rendered in the UI but if you take a look at the console we have had an infinite loop of data fetching we want the data to be fetched only once on component did mount and the way we
Achieve that is by specifying an empty dependency list to use effect so the second parameter to use effect is an empty array if we now take a look at the browser you can see that the data is fetched only once and the same is rendered in the UI so this is pretty
Much how you fetch data with use effect in the next video let’s expand on this example and learn how to fetch an individual post by entering a post ID and making the get request on a button click
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Why is my useEffect executed twice?
What i learned from this #12
1. datafetching is possible using 2 methods 1st is using fetchApi and 2nd is using axios package .
2. practical implementation of useState and useEffect is in this episode so this is important.
3. use of map function and display the fetching data.
End of EP12
i love indian teachers
Done thanks
Using axios library to make the requests, and making the call in useEffect with empty array passed as dependency to run only once, replaced componentDidMount
i get vulnerability issues while installing axios package…what should i do?
I agree with the other posts.
How to ignore SSL certificate errors in React JS when I try to fetch data from Elasticseacrch
I watched your first video and became fan explaining Every line ❤️❤️
Out of thousand videos and wasting so many hours, this video worked for me. Thanks a lot brother!!!
thank you
What about making a post request
thank u
The only tutorial among the thousands of similar videos uploaded on youtube, that make real sense. This is really what the learners want. Hope you will upload more videos
Really amazing!
how can we trigger the useEffect again. I want to load in the "posts" on load and then update when I send a new post to the database?
This is the best explanation ever!
Exactly what i was looking forr, thanks so muchhh
Hey i m not able to render or print api response on screen even after using useState with useEffect . But when i pass useState ' s variable in dependency array it renders the screen so is it recommned to pass api response i dependency array list. Note i was also using checking if i got the reponse or not meaning conditional rendering
thanks a lot! exactly what I needed
Excellent tutorials. Thank you so much.
Keep getting map is not a function
Great video but why is it infinite after the state was updated?. Why is it infinite?
Excellent Tutorials, Love it. you made reactjs such a simple thing. I cant believe it.
Took me a whole day to try and figure the issue out and this video gave the solution in less than 5 minutes
Very clean explanation
Fantastic teacher.
Thanks Alot
Love from India …….perfect explanation……..you relly care for everyone …..best teacher
I was messed up just because of that infinite loop.
Is passing a empty dependency array means component did Mount once
Also tell what is happening when no depending array passed
THANK YOU THANK YOU
Why do I have to save twice inorder to get the Data, initially it returns an empty array but after that I have to hit "ctrl + s" inorder to get the data. WHY?
Can I contact with you ?
anyone get twice api called like me?
This and the following two tutorials are nicely done, but, it's pretty much bush league bs to not include a link to the code in your vid.
Man ! You are so good thank you i can implement to fetch data from backend
Code is fetching data on first render but change usestate variable on second render
thx a lot, worked for me
Great video! 🙂
u didnt set state post values…
How to fetch img
hii you made a very nice tutorial on how to get the json data into the component using fetch. A high request from you to make a video on how to get the json array of objects stored into the local file into a component and then further getting an individual id and its related content from that json array into the another component using useParams()- react hook
everything is fine but when i reload the page, i get the uncaught type error on my console..
thanks for those videos.
what is the theme name that you are using ?
Thanks for crystal clear explanations!