Breaking News: Grepper is joining You.com. Read the official announcement!

throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');

Add Answer

Zeeshan Rajpot answered on March 9, 2021 Popularity 10/10 Helpfulness 1/10

answer throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');

related Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

related too many re-renders. react limits the number of renders to prevent an infinite loop.

related error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent

throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');

Comment

throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');

<Button
onClick={ () => clicked() } // do this
>
<Button
onClick={ clicked() } // instead of
>

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: limits throw typescript

Link to this answer
Share Copy Link

Contributed on Apr 04 2023

Zeeshan Rajpot

0 Answers Avg Quality 2/10

Closely Related Answers

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Comment

<Button
onClick={ () => clicked() } // do this
>
<Button
onClick={ clicked() } // instead of
>

Popularity 10/10 Helpfulness 4/10 Language typescript

Source: stackoverflow.com

Tags: limits li

Link to this answer
Share Copy Link

Contributed on Mar 24 2022

Said HR

0 Answers Avg Quality 2/10

too many re-renders. react limits the number of renders to prevent an infinite loop.

Comment

I suspect that the problem lies in the fact that you are calling your state setter immediately inside the function component body, which forces React to re-invoke your function again, with the same props, which ends up calling the state setter again, which triggers React to call your function again.... and so on.

const SingInContainer = ({ message, variant}) => {
    const [open, setSnackBarState] = useState(false);
    const handleClose = (reason) => {
        if (reason === 'clickaway') {
          return;
        }
        setSnackBarState(false)

      };

    if (variant) {
        setSnackBarState(true); // HERE BE DRAGONS
    }
    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}
Instead, I recommend you just conditionally set the default value for the state property using a ternary, so you end up with:

const SingInContainer = ({ message, variant}) => {
    const [open, setSnackBarState] = useState(variant ? true : false); 
                                  // or useState(!!variant); 
                                  // or useState(Boolean(variant));
    const handleClose = (reason) => {
        if (reason === 'clickaway') {
          return;
        }
        setSnackBarState(false)

      };

    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}
Comprehensive Demo
See this CodeSandbox.io demo for a comprehensive demo of it working, plus the broken component you had, and you can toggle between the two.

Popularity 10/10 Helpfulness 3/10 Language typescript

Source: Grepper

Tags: limits li

Link to this answer
Share Copy Link

Contributed on Mar 09 2021

Santino

0 Answers Avg Quality 2/10

error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent

Comment

The problem can be found in your onClick prop:

<button className="previous-round" onClick={setOrderData_(previous(orderData_))}>&#8249;</button>
                                            ^
Everything between the curly braces gets evaluated immediately. This causes the setOrderData_ function to be called in every render loop.

By wrapping the function with an arrow function, the evaluated code will result in a function that can be called whenever the user clicks on the button.^

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Aug 12 2021

hamzah

0 Answers Avg Quality 2/10

throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');

Contents

More Related Answers

throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');

Closely Related Answers

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

too many re-renders. react limits the number of renders to prevent an infinite loop.

error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.