React Maximum update depth exceeded error fix

If you come across this error in React

Error: React Maximum update depth exceeded

This is actually a problem with infinite calls or loops happening that can be caused in various ways. We will see each case and how to fix them.

Case 1: Infinite useEffect call due to state change

import { useEffect, useState } from "react";
export default function CountComponent() {
  const [count, setCount] = useState(1);
  const updateCount = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    updateCount();
  }, [count]);

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

If you have a similar function, then you will get the Maximum depth error.

To understand why, you need to know a little about useEffect.

useEffect(() => {});

If you have something like this, useEffect is called on every render. Meaning if there is any state change in your program, useEffect is going to get called. You can pass a dependency array and cause it to be called only particular state changes by adding it to an array like this:

useEffect(() => {
  //Now useEffect is called only when someChangingVariable changes state
}, [someChangingState]);

So, in the first program the useEffect will call updateCount which will set new value for count which will cause a rerender(some state in your program changed). useEffect will be called again due to the state change of count(because that’s what useEffect is supposed to do) thus going infinite times even if you use a dependency array with count. This is an infinite loop so you will get error in this case.

Case 2: Passing function to the component instead of reference

import { useEffect, useState } from "react";
export default function CountComponent() {
  const [count, setCount] = useState(1);
  const updateCount = () => {
    setCount(count + 1);
  };

  return <div>{count}
  <button onClick={updateCount()}>
  </div>;
}

If you are passing your updateCount function to the onClick handler, then you are calling updateCount infinite times. It’s because the updateCount is not being called when you are clicking the button but is being called every second! This causes the state of count to change which causes a rerender and this goes on infinite times.

Just to play around, if you were to remove the setCount inside the updateCount you won’t get the error because no state change is happening and thus no rerender.

import { useEffect, useState } from "react";
export default function CountComponent() {
  const [count, setCount] = useState(1);
  const updateCount = () => {
    //setCount(count + 1);
  };

  return <div>{count}
  <button onClick={updateCount()}>
  </div>;
}

How to fix this?

Call the reference to the function and not the function.

import { useEffect, useState } from "react";
export default function CountComponent() {
  const [count, setCount] = useState(1);
  const updateCount = () => {
    setCount(count + 1);
  };

  return <div>{count}
  <button onClick={updateCount}>
  </div>;
}

Simply, remove the parentheses inside the onClick handler so that the function is called only when clicking the button and not every second.

If you want more tutorials like this or have questions about this tutorial, follow me on Twitter. Also if you want to receive it in your email, subscribe to the newsletter! Thanks for your time!