The Beginner's Guide to React's useEffect Hook
Tags: beginners, react, javascript, webdev
Published: 2024-04-10 17:48:53

One of the core fundamentals beginner coders learn is that functions are "self-contained" blocks of reusable code that perform a single task. Functions "take in" data, processes it, and "return" a result, and can be run multiple times. But what if they could do more? What if they could have a side effect? Let me introduce React's `useEffect` hook. 

##Hooks

If you're new to React, like I was a month and a half ago, you might not be too familiar with hooks, yet. Hooks lets you add stateful logic to a functional component without writing a class. There are several types of hooks built into React including, but not limited to: Effect, Context, and State. `useEffect` falls under the Effect hook, hooks that allow components to connect and synchronize with external systems such as the browser DOM, network, and other non-React code.

![Hook meme.](https://assets-global.website-files.com/64d4ce10600bd67e51c42838/650c026b5958571cd6f9dd17_61e58b567b811f7715e069b6_Make%2520a%2520React%2520Hook%2520out%2520of%2520your%2520Native%2520Module%2520meme.jpeg)

But why would we need to do that? In the realm of React development, managing side effects is an essential aspect of building robust and efficient applications. Here are a few examples for you. What if we have an object that we want to use to control a non-React component based on the object's State? Or what if we need to perform a GET request right after the page is fully rendered? How about setting up a timer that only increments while it is active? Or simply being able to subscribe to events or update the DOM? These scenarios, crucial for creating dynamic user interfaces, are easily achievable with the `useEffect` hook. 

##useEffect Basic Usage

Before we begin, **don't** forget to import the `useEffect` hook! 

Now, let's start with the basics. The `useEffect` hook accepts two parameters: a callback function and an array of dependencies. The function is the side effect we want to perform, and the dependencies array allows us to specify values that, when changed, will trigger the effect to run again. This mechanism ensures precise control over when the side effect should be executed.

![Basic template for the useEffect hook within a React component.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bt9s9mgo9gd66at4p83.png)

That is why understanding how dependencies work in `useEffect` is key for writing efficient and bug-free code. When we provide a dependency array, React will re-run the effect whenever any of the dependencies change. If you omit the dependency array, the effect will run on every render, potentially causing performance issues. Imagine the side effect code running in an infinite loop, an unstoppable force littering your console with lines of GET request arrays or "Hello, World!". Scary. That's why, at the minimum, we should always supply the `useEffect` hook with an empty dependency array. We can also provide arrays that aren't empty,  and these will ensure that the effect will only run when the contents of the array change. 

![Basic template of useEffect hook showing off the dependencies array.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97q2bk44phrbd1grns37.png)

If we provide multiple arrays, such as `dependency1` and `dependency2`, the effect will read this as run when `dependency1` **or** `dependency2` changes. And these arrays usually change when we `setState` of a component and it re-renders. By default `useEffect` will run the side effect function in the following order:

![useEffect hook flow chart.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akklmzcmm1rz3wov3ht9.png)

By following these dependency array rules, we can optimize performance and avoid unnecessary computations.

##Cleaning Up

Another neat feature of the `useEffect` hook is that it is designed to allow the 'return' of a function within it as a means to tidy up our code before the component unmounts. This function also runs right before the execution of the next effect. This is because specific side effects might require cleanup to prevent memory leaks or unwanted behavior. 

![Clean up meme](https://i.pinimg.com/236x/45/77/21/457721460ab58782c915fb1d1fb7f26a.jpg)

For example, let's say you're performing a fetch request on the server to get user A's information but change your mind before the request is complete. Instead, you decide to fetch the information of user B. Without the cleanup function, both fetch requests would continue to run even though the components have been unmounted or the dependencies have changed. This can lead to unexpected behaviors such as the effect attempting to update components that are no longer mounted or display the wrong information. With the cleanup function, we can abort the first fetch request of user A before moving on to user B and ensure that resources are properly released when they're no longer needed.

##Conclusion

In conclusion, the `useEffect` hook is an incredibly essential tool for managing side effects in React functional components. It's versatile and simple and can handle a wide range of scenarios such as fetching data, subscribing to events, and interacting with the DOM. Although we shouldn't use this effect to handle every aspect of our code like orchestrating the data flow of our apps, it is a great hook that lets us "step out" of our React code and synchronize with external systems like API's, databases, networks, and so on. So go ahead, leverage the power of `useEffect` for your projects, and embrace this wonderful React hook.