Dependency Arrays for Days: The React UseEffect Hook Explained by a Beginner for Beginners

UseEffect in full effect.

Unburdened by the Knowledge

If you’re new to React like me, the “for days” part of this article’s title probably hits close to home! Learning React is no joke and a lot of React concepts can be mind-boggling to a newbie. With hooks being all the rage these days, it’s inarguable that using the UseEffect React hook is a staple in every React developer’s diet. Unburdened by the knowledge, I’ll offer my recent experience wrapping my head around this concept and will refer to my very modest Doggonit app to illustrate my points.

Here’s Your E-Book on the UseEffect Hook

In short, the useEffect hook lets you perform side effects inside functional components. So what are side effects? Put extremely simply, side effects are asynchronous operations. The most common example I’ve seen so far is fetching data from an API endpoint. But why would you want an API call to happen asynchronously, you ask?

Imagine this: You’re visiting your parents for the weekend and you have an excruciatingly slow 3G connection. It’s Friday and you’re exhausted after a long day at work and the 5-hour drive it took to get there. All you want to do is look at cute pictures of dogs. You pull up your favorite app, Doggonit, and you navigate to the home screen. Doggonit, it’s a blank screen!

Ok, that was a longwinded example, but you get my point, right? You don’t want your app to be dependent on an API response to render. What the useEffect hook makes possible, is the ability to concisely (aka without a lot of code) treat your API fetch as a side effect, meaning the component will render with other content and/or a loading element before your application gets a response from an endpoint. Explained in reverse, you tell React that your component needs to do something after render.

Here’s the general useEffect hook syntax.

This is Where the Dependency Array Comes Into Play

An important concept to understand is that effects run after every render cycle, including the first one. Without the inclusion of a dependency array, this translates to the infinite trigger of renders after useEffect runs. This infinite loop could consequently crash your app and/or deplete your precious allotment of API keys. We obviously want to avoid that. This is where the dependency array comes into play. Ok, there are just too many rhymes to run with here!

The beauty of a dependency array is that it allows you to declare the conditions that trigger it. If you only want to run an effect once (aka make a GET request to “https://dog.ceo/api/breed”), you can pass an empty array ([ ]) as a second argument inside your useEffect function. This literal array, or set of brackets, is a dependency array. It communicates to React that your useEffect doesn’t rely on props or state, so it never needs to re-run.

Here, with my empty dependency array, I’m requesting 5 random images of dogs once.

But what if you do want your call to re-run under specific conditions? In the case of my Doggonit app, I specifically want to show a list of new random dog pictures depending on the dog breed specified by the user. Put technically, I want to repeat my API request every time the dogBreedName variable updates. By adding dogBreedName inside the dependency array, I’m enabling this.

Here, with dogBreedName inside my dependency array, I’m making an API call every time dogBreedName updates.

So that’s it! UseEffect explained by a beginner to beginners. Have any questions or corrections to offer? Feel free to reply in the comments below. If you’re looking to explore my implementation of the useEffect hook more, I also encourage you to check out my Doggonit GitHub repository.