[Solved] Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

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 ?

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

• SyntaxError: invalid syntax to repo init in the AOSP code.