You Probably Don't Need an Effect.. Unless
Tags: webdev, react, frontend
Published: 2023-04-24 03:53:21

## React useEffect hook cleanup & other advanced uses
You Probably Don't Need an Effect, unless you know how to clean it up.
Topics that will be covered in this article:

> 1. Using clean up function in useEffect
> 2. Clean up with AbortController() in fetch request
> 3. Clean up with IIFE
> 4. Advanced usage: building custom hooks with useEffect

Knowing how to clean up the effect and use it properly is important to code efficient and readable programs.

### Fetch request with Effect, but without cleanup
Here we have a plain fetch request with useEffect.

![useEffect function without clean up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbx4smpvvzzyx3lt9e70.png)

It runs once when the page load, giving the empty square bracket [] dependency. 
However, if the fetch request is triggered successively, we will get delayed and inaccurate data[1].
Imagine that we called fetch request 3 times. The API could respond at different times. 
Say the first fetch takes 1000ms to respond; 
the second 3000ms, 
the third 1500ms. 
If the 3 requests run without cleanup, we will end up getting the response from the slowest request, in this case, the second. In order to ensure the data is in sync, we want to cancel the previous request before the next fetch starts.

### Use the cleanup function in useEffect
We can clean up the previous code with a clean-up function[1], where we call the function in a return statement. This will ensure the effect stops running before this component is unmounted.

![useEffect function with cleanup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toqz0930otv2viwr3olj.png)

### Use AbortController() in useEffect
In React, there is a built-in function called abort controller[1]. By passing a signal from the controller, the abort controller will cancel the fetch request every time the useEffect changes, to ensure the data is in sync[1].

![Clean up useEffect with abort controller](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/202eeo7m6rpe4mkyumm7.png)

### Clean up with IIFE[5]
IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined[6]. It helps limit the number of global variables[6]. 

![Fetch request with IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30et4qudsvjc736v5li3.png)

### Advanced: Build smaller custom hooks[3][4][5]
React allows building your own hooks. It lets you extract component logic into reusable functions[3].
By using the effect in our custom function useYesNoFetch as a separate component.

![Building custom useEffect hook as componet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hts7wdfb66v88bz1vq4o.png)

We can call it in App.js without using the effect in the main app. This will make the main app cleaner and more readable[2].

![Custom useEffect hooked called in the App.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvubhsmn6z8z2faduhsf.png)

#### About the author: 
I am a graduate student studying information science and I am learning frontend development for only 4 months at the time this article is written. The content may not be 100% accurate. If you want to suggest any improvement in this article, feel free to comment.

#### Citation
Web Dev Simplified (2022), Top 6 React Hook Mistakes Beginners Make [Video]. YouTube. https://www.youtube.com/watch?v=GGo3MVBFr1A
Web Dev Simplified (2022), Why I Don’t Use useEffect In My React Components [Video]. YouTube  https://www.youtube.com/watch?v=MFj_S0Nof90
React.js, Building Your Own Hooks. https://legacy.reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook
PedroTech (2022), How to Fetch Data in React With A Custom useFetch Hook [Video]. YouTube. https://www.youtube.com/watch?v=Vspeudp-M9k
Cihan (2022), Advanced React Hooks: Everything About the UseEffect. https://medium.com/fullstack-programming-in-english/advanced-react-hooks-everything-about-the-useeffect-9f065d05f8b7
MDN Web Docs, IIFE. https://developer.mozilla.org/en-US/docs/Glossary/IIFE

Special thanks to my friend, Hathor Hamilton for reviewing the content.