Home

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

Run React Effect Hook only Once in Strict Mode

Running React in strict mode with Next.js can lead to useEffect callbacks with zero dependencies to run twice in development. Here’s a way around that.

Jun 25, 2022

Simple Content Tab with React and Tailwind

The foundation for a tab system begins with a state hook, triggered by clicks on tab elements. View the code snippet and use the playground to see it in action.

May 28, 2022