Avoiding an Infinite Loop in the useEffect Hook

It’s surprisingly easy to create infinite loops in React.

If you’ve encountered an infinite loop in React, it’s almost certain that you’ve added code inside an effect hook without specifying a dependency. Unfortunately, React doesn’t tell you that you’re doing anything wrong.

Here’s a simple example in which you update and render a counter.

import { useEffect, useState } from "react";

export const MyInfiniteLoop = () => {
const [count, setCount] = useState(0);

useEffect(() => setCount(count + 1));

return <div>Count: {count}</div>;

In this case, here’s what happens:

  1. Component renders.
  2. useEffect() runs.
  3. count is incremented by 1. This triggers a re-render. (Go to #1.)

Avoiding the Hook

The way to get around this is to specify an array of dependencies to the effect hook. By default, there are no dependencies, which means it will run every time the component renders.

You can instead tell the hook that it has no dependencies, and so it will only render a single time.

import { useEffect, useState } from "react";

export const MyInfiniteLoop = () => {
const [count, setCount] = useState(0);
// Use an empty array as the second arg to specify no dependencies
useEffect(() => setCount(count + 1), []);
return <div>Count: {count}</div>;

Catching Infinite Loops Earlier

If you’re using eslint, as is a common practice in modern JavaScript projects, then you can make use of the eslint-plugin-react-hooks plugin, which will throw warnings when there is a risk for more renders than intended.

Let's Connect

Keep Reading

Storing Multiple Elements in a Single Ref in React

In some cases, you may want multiple references in a component of unknown quantity. Here’s how you can make it work.

May 31, 2022

Difference Between React and Vue.js

React and Vue are two of the most popular component frameworks used in modern website development. Let's break down the differences between these two everyday tools.

Jul 22, 2022

Animated Sliding Tabs with React and Tailwind

Add some flair to a simple tab solution by adding an animated bottom border.

May 29, 2022