Hello Guys, How are you all? Hope You all Are Fine. Today I am just using the SnackBar component But I am Facing the following error Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop in reactjs. So Here I am Explain to you all the possible solutions here.
Without wasting your time, Let’s start This Article to Solve This Error.
How Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Error Occurs ?
Today I am just using the SnackBar component But I am Facing the following error.
Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop.
at invariant (http://localhost:9000/bundle.js:34484:15)
at dispatchAction (http://localhost:9000/bundle.js:47879:44)
How To Solve Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Error ?
How To Solve Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Error?
To Solve Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Error I think the Problem is In SnackbarContentWrapper you need to use the below example. you can just curry the
handleClose
inSingInContainer
toInvariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
To Solve Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Error I think the Problem is In
SnackbarContentWrapper
you need to use the below example. you can just curry thehandleClose
inSingInContainer
to
Solution 1
I think the Problem is In SnackbarContentWrapper
you need to use below example.
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={() => onClose}
>
you can just curry the handleClose
in SingInContainer
to
const handleClose = () => (reason) => {
if (reason === 'clickaway') {
return;
}
setSnackBarState(false)
};
Solution 2
You must link an event in your onClick. Additionally, the click function must receive the event. See the example
export default function Component(props) {
function clickEvent (event, variable){
console.log(variable);
}
return (
<div>
<IconButton
key="close"
aria-label="Close"
color="inherit"
onClick={e => clickEvent(e, 10)}
>
</div>
)
}
Solution 3
Here You need to add an event, before calling your handle function like this:
function ExampleContainer() {
handleClose = () => {
}
return (
<SnackBar
open={open}
handleClose={() => handleClose}
variant={variant}
message={message}
/>
<SignInForm/>
)
}
Summery
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also Read