How to solve the React useEffect Hook’s infinite loop patterns
Tags: react
Published: 2022-05-10 14:08:26

**Written by [Hussain Arif](https://blog.logrocket.com/author/hussain-arif/)✏️**

React’s `useEffect` Hook lets users work on their app’s side effects. Some examples can be:

*   [Fetching data from a network](https://blog.logrocket.com/data-fetching-react-native/): often, applications fetch and populate data on the first mount. This is possible via the `useEffect` function
*   Manipulating the UI: the app should respond to a button click event (for example, opening a menu)
*   Setting or ending timers: if a certain variable reaches a predefined value, an inbuilt timer should halt or start itself

Even though [usage of the `useEffect` Hook](https://blog.logrocket.com/guide-to-react-useeffect-hook/) is common in the React ecosystem, it requires time to master it. Because of this, many newbie developers configure their `useEffect` function in such a way that it causes an infinite loop problem. In this article, you will learn about the infamous infinite loop and how to solve it.

Let’s get started!

## What causes infinite loops and how to solve them

### Passing no dependencies in a dependency array

If your `useEffect` function does not contain any dependencies, an infinite loop will occur.

For example, look at the following code:

```js
function App() {
  const [count, setCount] = useState(0); //initial value of this 
  useEffect(() => {
    setCount((count) => count + 1); //increment this Hook
  }); //no dependency array.
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}
```

`useEffect` by default triggers on every update cycle if there are no dependencies. As a result, the app here will execute the `setCount` function upon every render. So, this causes an infinite loop:

![Infinite Loop](https://blog.logrocket.com/wp-content/uploads/2022/04/infinite-loop.gif)

#### What causes this issue?

Let’s break down our issue step by step:

1.  On the first render, React checks the value of `count`. Here, since `count` is `0`, the program executes the `useEffect` function
2.  Later on, `useEffect` invokes the `setCount` method and updates the value of the `count` Hook
3.  After that, React re-renders the UI to display the updated value of `count`
4.  Furthermore, since `useEffect` runs on every render cycle, it re-invokes the `setCount` function
5.  Since the above steps occur on every render, this causes your app to crash

#### How to fix this issue

To mitigate this problem, we have to use a dependency array. This tells React to call `useEffect` only if a particular value updates.

As the next step, append a blank array as a dependency like so:

```js
useEffect(() => {
  setCount((count) => count + 1);
}, []); //empty array as second argument.
```

This tells React to execute the `setCount` function on the first mount.

![Execute SetCount Function On The First Mount](https://blog.logrocket.com/wp-content/uploads/2022/04/execute-setcount-function-on-first-mount.png)

### Using a function as a dependency

If you pass a method into your `useEffect` dependency array, React will throw an error, indicating that you have an infinite loop:

```js
function App() {
  const [count, setCount] = useState(0);

  function logResult() {
    return 2 + 2;
  }
  useEffect(() => {
    setCount((count) => count + 1);
  }, [logResult]); //set our function as dependency
  return (
    <div className="App">
      <p> value of count: {count} </p> {/*Display the value of count*/}
    </div>
  );
}
```

In this snippet, we passed our `logResult` method into the `useEffect` array. In theory, React only has to increment the value of `count` on the first render.

![Passing The LogResult Method Into The UseEffect Array](https://blog.logrocket.com/wp-content/uploads/2022/04/passing-logresult-method-into-useeffect-array.png)

#### What causes this issue?

1.  One thing to remember is that `useEffect` uses a concept called [shallow comparison](https://learntechsystems.com/what-is-shallow-comparison-in-js/). It does this to verify whether the dependency has been updated
2.  Here, the problem is that during each render, React redefines the reference of `logResult`
3.  As a result, this re-triggers the `useEffect` function upon each cycle
4.  Consequently, React calls the `setCount` Hook until your app encounters an **Update Depth** error. This introduces bugs and instability into your program

#### How to fix this issue

One solution to this is to use the `useCallback` Hook. This allows developers to [memoize their function](https://blog.logrocket.com/rethinking-hooks-memoization/), which ensures that the reference value stays the same. Due to the stable reference value, React shouldn’t re-render the UI infinitely:

```js
const logResult = useCallback(() => {
  return 2 + 2;
}, []); //logResult is memoized now.
useEffect(()=> {
  setCount((count)=> count+1);
},[logResult]); //no infinite loop error, since logResult reference stays the same.
```

This will be the result:

![Ensuring That The Reference Value Stays The Same](https://blog.logrocket.com/wp-content/uploads/2022/04/ensuring-reference-value-stays-the-same.png)

### Using an array as a dependency

Passing an array variable into your dependencies will also run an infinite loop. Consider this code sample:

```js
const [count, setCount] = useState(0); //iniital value will be 0.
const myArray = ["one", "two", "three"];

useEffect(() => {
  setCount((count) => count + 1); //just like before, increment the value of Count
}, [myArray]); //passing array variable into dependencies
```

In this block, we passed in our `myArray` variable into our dependency argument.

![Passing Our MyArray Variable Into Our Dependency Argument](https://blog.logrocket.com/wp-content/uploads/2022/04/passing-myarray-variable-into-dependency-argument.gif)

#### What causes this issue?

Since the value of `myArray` doesn’t change throughout the program, why is our code triggering `useEffect` multiple times?

1.  Here, recall that React uses shallow comparison to check if the dependency’s reference has changed.
2.  Since the reference to `myArray` keeps on changing upon each render, `useEffect` will trigger the `setCount` callback
3.  Therefore, due to `myArray's` unstable reference value, React will invoke `useEffect` on every render cycle. Eventually, this causes your application to crash

#### How to fix this issue

To solve this problem, we can make use of a [`useRef`](https://www.react.express/hooks/useref) Hook. This returns a mutable object which ensures that the reference does not change:

```js
const [count, setCount] = useState(0);
//extract the 'current' property and assign it a value
const { current: myArray } = useRef(["one", "two", "three"]);

useEffect(() => {
  setCount((count) => count + 1);
}, [myArray]); //the reference value is stable, so no infinite loop
```

### Passing an object as a dependency

Using an object in your `useEffect` dependency array also causes the infinite loop problem.

Consider the following code:

```js
const [count, setCount] = useState(0);
const person = { name: "Rue", age: 17 }; //create an object
useEffect(() => {
  //increment the value of count every time
  //the value of 'person' changes
  setCount((count) => count + 1);
}, [person]); //dependency array contains an object as an argument
return (
  <div className="App">
    <p> Value of {count} </p>
  </div>
);
```

The result in the console indicates that the program is infinite looping:

![Console Result Showing Infinite Looping](https://blog.logrocket.com/wp-content/uploads/2022/04/console-result-showing-infinite-looping.png)

#### What causes this issue?

1.  Just like before, React uses shallow comparison to check if the reference value of `person` has changed
2.  Since the reference value of the `person` object changes on every render, React re-runs `useEffect`
3.  As a result, this invokes `setCount` on every update cycle. This means that we now have an infinite loop

#### How to fix this issue

So how do we get rid of this problem?

This is where `useMemo` comes in. This Hook will compute a memoized value when the dependencies change. Other than that, since we have a memoized variable, this ensures that the state’s reference value does not change during each render:

```js
//create an object with useMemo
const person = useMemo(
  () => ({ name: "Rue", age: 17 }),
  [] //no dependencies so the value doesn't change
);
useEffect(() => {
  setCount((count) => count + 1);
}, [person]);
```

### Passing an incorrect dependency

If one passes the wrong variable into the `useEffect` function, React will throw an error.

Here is a brief example:

```js
const [count, setCount] = useState(0);

useEffect(() => {
  setCount((count) => count + 1);
}, [count]); //notice that we passed count to this array.

return (
  <div className="App">
    <button onClick={() => setCount((count) => count + 1)}>+</button>
    <p> Value of count{count} </p>
  </div>
);
```

![Passing An Incorrect Dependency](https://blog.logrocket.com/wp-content/uploads/2022/04/passing-incorrect-dependency.gif)

#### What causes this issue?

1.  In the above code, we are telling to update the value of `count` within the `useEffect` method
2.  Furthermore, notice that we passed the `count` Hook to its dependency array as well
3.  This means that every time the value of `count` updates, React invokes `useEffect`
4.  As a result, the `useEffect` Hook invokes `setCount`, thus updating `count` again
5.  Due to this, React is now running our function in an infinite loop

#### How to fix this issue

To get rid of your infinite loop, simply use an empty dependency array like so:

```js
const [count, setCount] = useState(0);
//only update the value of 'count' when component is first mounted
useEffect(() => {
  setCount((count) => count + 1);
}, []);
```

This will tell React to run `useEffect` on the first render.

![Run UseEffect On First Render](https://blog.logrocket.com/wp-content/uploads/2022/04/run-useeffect-first-render.gif)

## Conclusion

Even though React Hooks are an easy concept, there are many rules to remember when incorporating them into your project. This will ensure that your app stays stable, optimized, and throws no errors during production.

Furthermore, recent releases of the [Create React App](https://create-react-app.dev/) CLI also detect and report infinite loop errors during runtime. This helps developers spot and mitigate these issues before they make it onto the production server.

![React Hooks Exhaustive Deps](https://blog.logrocket.com/wp-content/uploads/2022/04/react-hooks-exhaustive-deps.png)

Thank you so much for reading! Happy coding!

---

## Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket](https://www2.logrocket.com/react-performance-monitoring). 

![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — [start monitoring for free](https://www2.logrocket.com/react-performance-monitoring).