DEV Community

Cover image for Get Up And Running With The useEffect Hook.

Get Up And Running With The useEffect Hook.

Talabi Ayomide on June 21, 2022

Hooks are new features incorporated into React 16.8. and the newer versions. They basically help you use React features without writing a class. I...
Collapse
 
gass profile image
Gass • Edited

It's an easy way of explaining and understanding how useEffect works. But I agree. Maybe it would be better to create an example using something like window dimensions which from my point of view requires the useEffect hook. Needed for adding and removing the event listener.

useWindowDimensions custom hook

From React docs

The clean-up function runs before the component is removed from the UI to prevent memory leaks. Additionally, if a component renders multiple times (as they typically do), the previous effect is cleaned up before executing the next effect.

Collapse
 
peerreynders profile image
peerreynders • Edited

Please have a look over the updated documentation:

Collapse
 
ayo_dev profile image
Talabi Ayomide

Thank you!

Collapse
 
crowdozer profile image
crowdozer

For those just getting started with useEffect, I highly suggest using something that provides intellisense about the hook's dependency array.

It's straightforward once you're used to the concept, but in the beginning, it will save you lots of headaches.

Collapse
 
himanshupal0001 profile image
Himanshupal0001

Thanks for the explanation. But I still struggling to understand this concept. Can you explain it with a more practical app or example. Please share if you have any YT link etc.

Collapse
 
ayo_dev profile image
Talabi Ayomide

I think this Youtube video by WebDevSimplified will help you get a clearer picture.
youtu.be/0ZJgIjIuY7U

Collapse
 
christiankozalla profile image
Christian Kozalla

Nice article, I like it :D

Collapse
 
ayo_dev profile image
Talabi Ayomide

I'm glad you found it useful.

Collapse
 
christiankozalla profile image
Christian Kozalla

I've recently written a post about useEffect, specifically about the dependency array. Because I tend to forget how to use it right. You find it here if you like: chrisko.io/posts/useEffect-hook-de...

Thread Thread
 
ayo_dev profile image
Talabi Ayomide

It was an amazing read..

Collapse
 
ayo_dev profile image
Talabi Ayomide

Thanks for your addition. This isn't a sophisticated example,it was just to help beginners up and running.