React Hooks Tutorial - 10 - useEffect with cleanup

thanks for this

One more example of clean up func would be when we make an api call in a component and the component unmout before completion of the api in that case also its useful

Done thanks
UseEffect can replace componentWillUnmount to do cleanup code like removing listeners. If you return a function from the useEffect callback, that function will be executed by react when the component will unmount

I am Java backend developer and able to understand every easily and comfortably very easy react and feeling like full stack developer after this complete lecture and thank you very much vishwas Ji

Amazing teacher!!!!

amazing explanation, very clear

The problem with a 3-year-old tutorial:
- no warning message
- component unmounts but EvenListener is still listening

But he's a good teacher, there's a lot of good info in the code ... and it's free!

Very good explanation

Hi Vishwas, as of now React v18, the warning message is not appearing but the mousemove handler is still in effect even the component is unmounted. Do you know how can I replicate the error/warning? Btw the return unmount is working.

In current time, react handel it it's own.
When we remove a component all method of that component no longer available.

Hi all, my question is why useffect return function is not run instantly on page load.. How browser knows that it must be run only after component is removed? And also, if you set event listener to the component that captures window size and displays it on the screen and when you resize the window even after you clean up the useffect functuon, it stil captures the widow size if you display the component again, how is that? How it can capture the change if it was removed?

So a good indication that one must use the cleanup function is when you see memory leak errors in the console. How else can I find out that I need to cleanup in case an error isn''t appearing?

I was able to perform the same operation even without useEffect, so I am not really able to understand the importance of Effect hook

Bro this cleanup function is not working now, I think React is updated now...

Khatarnak ...you nailed it

this warning is not coming for me after clicking on toggle button. Can anyone pls help me understand why?

Does return statement/cleanup code get executed only on componentWillUnmount on all use cases of the dependency array? Or in other words, will return statement/cleanup code only get executed on componentWillUnmount if dependency array is missing or dependency array has dependencies?

thanks a ton for this fantastic tutorial. more power to you bruh!!! 💖💖

good video, mate. ty

Really great work here

if the return function is written but if it is empty, what will be the output ? does that make any change in output ?

Before 3 years this guy just helped me to learn angular and now react this guy is a pure blessing 🥰

Your toggle state use is incorrect. You should be passing a method into setDisplay. EG setDisplay(prev => !prev);

Simple and easy explanation, thank you.

Finally i get the purpose of return in useEffect, than you so much

Even though the component was un-mounted, how did the listener have access to the logMousePosition() function? Do unmounted components still remain in memory?

The great tutorial that I have ever seen on hooks as well as useeffect..Thanks for your excellency

not working with props and state

Great job man, thanks for this wonderful explanation 👍👍🙏🙏

This syntax it is also in the RxJS for mark data to garbage collector

Really love your videos🖤🖤🖤🖤

Excellent !!

Great.. You are making our basics strong

Short , sweet and simple.

I love this! You taught me things that many other people couldn't explain as well as you did! I hope this gets more views this is worth a lot! Thank you!

If anyone's thinking of where to practically implement this, it can be used for cancelling previous axios request, in case query term changed and old data is not fetched.

Well explained, Thank you because i was wondering what caused this error. One more error I don’t understand and I hope you could help us with it: (cannot update during an existing state transition such as within render, render method should be a pure function of props and state)

Nice one! Do you have any resources about how to clean up multiple axios requests when unmounting a component?

U r great sir

Thank U sir I am Learning from U Videos very much

Vishwas's videos are the only videos I 'thumbs up' before I even watch them because I know they are going to be fantastic.

in class componenet we use unmount i use with button i get cnannot read error

Thank you so much for this explanation. I like the situation examples you use for the explanations. I still wonder why someone leaves a dislike on such a good video

Thank you

Vishwas proves that teaching effectively is an art to master. NOT every instructor out there can do it well. Vishwas, thanks a million for generously sharing your knowledge on this channel without expecting a single cent. You're a legend!!

Thanks

Thank you vishwas

man, you are so clearly to explain. NICE!!