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

How to implement HTTPS in local development for React, Angular, and Node

Using an SSL certificate can be beneficial in local development, especially when communicating with external services.

Jan 11, 2023

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

Overriding Next.js Link and Image Components

Next.js ships with these two incredibly useful utility components. You can further abstract these to clean up your code.

Feb 09, 2023