Reactjs: Maximum Update Depth Exceeded Error

ReactJS: Maximum update depth exceeded error

That is because you are calling toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on.

This line in your code:

{<td><span onClick={this.toggle()}>Details</span></td>}

You need to make onClick refer to this.toggle instead of calling it.

To fix the issue do this:

{<td><span onClick={this.toggle}>Details</span></td>}

Maximum update depth exceeded. React

Notice what happens when a child component updates its data:

1. It calls parent.saveData
2. This triggers a state change in the parent because the data array has changed
3. Because you didn't pass a key prop to children, React has no choice but to re-render all children with the updated data
4. Each child notices that its data prop has changed. This triggers the useEffect, so it also calls parent.saveData
5. The process repeats while the original render is still taking replace, etc, etc

Solution

1. Pass a key prop to each child. Do not use the index as key, instead use something that reflects the data being passed to the components

Error: Maximum update depth exceeded (react state)

It looks like you are calling setState inside the body of your function component. This would cause your component to setState every time it is rendered, which then leads to another render, and another render... an infinite loop.

Instead, you should only call setState on events or within a useEffect hook.

Also, your Component needs to return some JSX, or null. It cannot return undefined.

function CompareCard({}) {
  const index = 0;
  const [productData, setProductData] = useState(data[index]);

  function setTotalUpdate(id) {
    const productPrevious = productData.products.find(function (rec) {
      return rec.id === id;
    });

    const productUpdated = {
      ...productPrevious,
      total: 1,
    };
    const productNew = productData.products.map(function (rec) {
      return rec.id === id ? productUpdated : rec;
    });
    setProductData(productNew);
  }
  
  useEffect(() => {
    // Only call setState within event handlers! 
    // Do not call setState inside the body of your function component
    setTotalUpdate(1);
  },[])

  // You need to return JSX or null
  return <p>productData: {JSON.stringify(productData)}</p>
}

Maximum update depth exceeded error in react app

Please update your hooks like the following.

Wrap validatePasswords by useCallback with dependencies of 2 states.

And add this function in dependency of useEffect.

const validatePasswords = useCallback( () => {
    if (password && confirmPassword) {
      setValidity(password === confirmPassword)
    }
  }, [password, confirmPassword])

  useEffect(() => {
    validatePasswords();
  }, [validatePasswords])

React setState inside componentDidUpdare leads to Maximum update depth exceeded

This happens because each setState triggers a render and then a componentDidMount again, which basically causes an infinite loop.
And to stop that loop, You need to set some conditions, to prevent the render all over again, for instance

    componentDidUpdate(previousProps, previousState) {
    if (previousProps.data !== this.props.data) {
        this.setState({/*....*/})
    }
   }

ReactJS: Maximum update depth exceeded with localstorage

I found the answer to my specific problem. But since I've learned how to create the protected route from an article online, this might be useful for others that might encounter this and don't understand why.

The issue was in the ProtectedRoute component. Each time a page is changed it is called (checked on an empty react app as well). And when it's calling the render inside the Route component, which then evaluates isAuthenticated(). Since authentication data is removed this is false and therefor falls to the Redirect component which again causes the ProtectedRoute to be re-rendered - and again and again - therefor - a loop.

To solve this, I've added a list to the component containing unprotected routes that should be ignored if auth is failed and they are the active route:

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { isAuthenticated } from "../../services/api/auth";

function ProtectedRoute({
    component: Component,
    children: ChildComponent,
    ...rest
}) {
    const location = useLocation();
    const unProtectedPaths = ["/"];

    return (
        <Route
            {...rest}
            render={(props) => {
                if (isAuthenticated()) {
                    return (
                        (Component && <Component {...props} />) ||
                        ChildComponent
                    );
                } else if (!unProtectedPaths.includes(location.pathname)) {
                    return (
                        <Redirect
                            to={{
                                pathname: "/",
                                state: { from: props.location },
                            }}
                        />
                    );
                }
            }}
        />
    );
}

export default ProtectedRoute;

React hooks Maximum update depth exceeded error

In this case, you don't need to maintain redundant state (postsArray), it's purely derived state from your redux data. So just compute it. This will additionally help you get rid of the infinite loop caused by the useEffect hook.

const params = useParams();
const posts = useSelector(state => state.redux);
const { location, history } = useReactRouter();
    
const postsArray = posts.REDUX_POSTS.filter(e => e.authorId === parseInt(params.id));

---

Related Topics