Learn React #9: UseEffect & UseEffect with API Requests

In this video we go over how to use React's useEffect hook complete with translations to componentDidMount, componentDidUpdate, and componentWillUnmount as well as fetch requests for api and data with Axios.
- 0:00 Introduction
- 0:55 The component lifecycle overview
- 3:00 UseEffect Basics
- 3:50 The array in the useEffect
- 4:00 Mount useEffect (componentDidMount)
- 4:20 Update useEffect (componentDidUpdate)
- 7:00 Unmount / Cleanup useEffect (componentWillUnmount)
- 8:55 No array useEffect
- 9:55 Combining update useEffect with cleanup
- 12:40 API Requests with useEffect

Fake JSON data:

Axios Example:

React useEffect Hook Docs:


Follow me on Social Media:

[ashking]

The best react tutorial ever...I got the junior react developer job coz of u...Thank you so so much..Do come up with redux tutorial as well 🙌🙌🙌

[rickr]

THIS IS THE BEST REACT SERIES ON YOUTUBE. So clear, concise and in order. You are one of the few youtubers that actually has put some effort in making a sequential series. Most youtubers produce just one off topics that do not connect to anything in the big picture. Leaving you with holes in your knowledge. Great stuff man, thank you!

[Badhon]

this is honestly the best react series of all, and this is free, i'm astonished

[furqanhaider]

Amazing method of teaching . Respect from Pakistan

[HarshSingh-hkfe]

after watching bunch of tutorials i found this one and trust me in one go i get the concept thanks alot bro for this tutorial it really helps the way you explain is brilliant .subbed you

[rjc]

Hi Anthony, I am an experience React, Redux lead developer and during my dev tenure, I had gone through so many tutorials, white papers etc. but I can easily say, this is one of the best React Life Cycle ( for Functional comp ) videos along with how to use side effects and make the component as a Pure Component / Non Pure as per requirements. I'm amazed. Keep it up !! :)

[dev_apostle]

like the way you teach. Everyone should come here for the basics.

[rrtyuui-]

Hey Anthony, i am a junior web developer that has to learn react, and i have to thank you for making the process so smooth, i started watching your material ui series and have continued watching all your react videos, you have some of the best react content and it has made learning react so much easier, thanks!

[madara_u_chiha]

You are a star! There is no other explanation! Thank you dude!

[abhinavgaur]

Impressed how much I learned from this 1 tutorial, I could not find component life cycle for functions every where it is for classes finally found it

[mustafazeb]

u just explain thing in very simple and easy way thats alot and God bless u

[dev_apostle]

you explain in simple language everyone can understand. The mark of a true teacher.

[ask]

mount: appear
update: unmount and mount with the new value->it means update has 2 actions: unmounting and mounting
unmounting: disappear.
great video

[hooow]

This is gold Anthony, you really know what you're doing. I hope you get the support you really deserve

[ankitchauhan]

The best channel for react. Thank you sir!!

[devotionalaastha]

Much more clear than the documentation....you are awesome bro...good luck and keep it up.👍

[TheYoungMunee]

This vid and the last one on the Lifecycle of a Component are really great

[EthanTotten]

I am a backend developer trying to learn front end as well and have not looked since pre-Hooks so useEffect was a new concept to me. This breaks it down quite well and unblocked me. Thanks!!!

[RakeshKumar-zjhu]

Man did you say project??? I’m excited. We want more of projects!! ❤️❤️

[NajlaSeghaier]

Best instructor ever and best React series ! Please keep making tutorials for us