A 2 Minute Visual Guide to useEffect
Published: 2021-12-07 09:11:54

Here is what happens when you try to fetch data directly from the body of a functional component in React 👇

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8f8vb7ueifgwuri5cnf.gif)

Why does this happen and what tools does React offer to solve this problem?

---

## Side effects

If your React component affects anything outside of itself, it's called a side effect.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/195vlozltczbysnz504x.png)

Side effects shouldn't happen during component render. Therefore they do not belong to the body of a functional component. React has a special place for them. 

<p class="info">To learn more about side effects and why they need a special treatment, check out this brilliant section in the new React documentation - <a target="_blank" rel="noreferrer" href="https://beta.reactjs.org/learn/keeping-components-pure">Keeping Components Pure</a>.</p>

---

## Dealing with side effects

The special place for side effects is inside the `useEffect` hook. Hence the name.

> By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
> 
> [React Docs - Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html#example-using-hooks)

Let's try it with our initial component:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wita221zf6u0191duxkc.gif)

The `useEffect` does not run during the render. It runs after the render, which is what we want. But we still have the same problem. That's because, by default, `useEffect` will run after every component render.

---

## Running effects conditionally

There is a way to run effects conditionally, not after every render. The `useEffect` hook accepts the dependency list as a second argument. React will only re-run the effect if any dependency in the list changes. Let's try it out:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di3t6tfj0xh1cgo03vfq.gif)


When you pass an empty array as a dependency list, the effect will run only once, after the first render. It prevents the infinite loop from happening in our case. However, you might notice that our fetch function relies on the `props.id` .

---

## Reacting to changes

Let's pick up where we left off and see what happens when we change the component's props.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogdfb4wu5gnhxh58wiy2.gif)

We would expect the component to react to prop change and fetch another product, but nothing happens. That's because we have an empty dependency list. 

If the side effect relies on any props or state variables, we should put them in the dependency list. After every render, React will check whether any dependency has changed, and if it did, will re-run the effect.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s1ms7xnja70yim1twp6.gif)

---

## To be continued...

There are a couple more things to learn about useEffect. Don't miss the next 2 minute guide. 

https://alexsidorenko.com/