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

Question

I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx:

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import CloseIcon from "@material-ui/icons/Close";
import green from "@material-ui/core/colors/green";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";

const variantIcon = {
  success: CheckCircleIcon,
  error: ErrorIcon
};

const styles1 = theme => ({
  success: {
    backgroundColor: green[600]
  },
  error: {
    backgroundColor: theme.palette.error.dark
  },
  icon: {
    fontSize: 20
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing.unit
  },
  message: {
    display: "flex",
    alignItems: "center"
  }
});

function SnackbarContentWrapper(props) {
  const { classes, className, message, onClose, variant, ...other } = props;
  const Icon = variantIcon[variant];

  return (
    <SnackbarContent
      className={classNames(classes[variant], className)}
      aria-describedby="client-snackbar"
      message={(
        <span className={classes.message}>
          <Icon className={classNames(classes.icon, classes.iconVariant)} />
          {message}
        </span>
      )}
      action={[
        <IconButton
          key="close"
          aria-label="Close"
          color="inherit"
          className={classes.close}
          onClick={onClose}
        >
          <CloseIcon className={classes.icon} />
        </IconButton>
      ]}
      {...other}
    />
  );
}

SnackbarContentWrapper.propTypes = {
  classes: PropTypes.shape({
    success: PropTypes.string,
    error: PropTypes.string,
    icon: PropTypes.string,
    iconVariant: PropTypes.string,
    message: PropTypes.string,
  }).isRequired,
  className: PropTypes.string.isRequired,
  message: PropTypes.node.isRequired,
  onClose: PropTypes.func.isRequired,
  variant: PropTypes.oneOf(["success", "error"]).isRequired
};

const MySnackbarContentWrapper = withStyles(styles1)(SnackbarContentWrapper);

const CustomizedSnackbar = ({
  open,
  handleClose,
  variant,
  message
}) => {
  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
      >
        <MySnackbarContentWrapper
          onClose={handleClose}
          variant={variant}
          message={message}
        />
      </Snackbar>
    </div>
  );
};

CustomizedSnackbar.propTypes = {
  open: PropTypes.bool.isRequired,
  handleClose: PropTypes.func.isRequired,
  variant: PropTypes.string.isRequired,
  message: PropTypes.string.isRequired
};

export default CustomizedSnackbar;

SignInFormContainer.jsx:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import SnackBar from '../../components/SnackBar';
import SignInForm from './SignInForm';

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

      };

    if (variant) {
        setSnackBarState(true);
    }
    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}

SingInContainer.propTypes = {
    variant: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired
}

const mapStateToProps = (state) => {
    const {variant, message } = state.snackBar;

    return {
        variant,
        message
    }
}

export default connect(mapStateToProps)(SingInContainer);

When I run the application I got this 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)
at SingInContainer (http://localhost:9000/bundle.js:79135:5)
at renderWithHooks (http://localhost:9000/bundle.js:47343:18)
at updateFunctionComponent (http://localhost:9000/bundle.js:49010:20)
at beginWork (http://localhost:9000/bundle.js:50020:16)
at performUnitOfWork (http://localhost:9000/bundle.js:53695:12)
at workLoop (http://localhost:9000/bundle.js:53735:24)
at HTMLUnknownElement.callCallback (http://localhost:9000/bundle.js:34578:14)
at Object.invokeGuardedCallbackDev (http://localhost:9000/bundle.js:34628:16)

The problem is due to the SnackBar component. I use the useStatehooks in order to change the state of the snackBar. Should I use a class and a componentShouldUpdate in order to not render multiple times?

You're probably using Webpack, in which case I'd like to bring to your attention the [devtool](https://webpack.js.org/configuration/devtool/) option which allows you to locate precisely the error in your original code, instead of locating the error in your bundled code as yyou have now — Nino Filiu, Mar 20 '19 at 16:25
Can you check if `handleClose` is called multiple times and if by changing `handleClose={handleClose}` to `handleClose={()=>handleClose}` will solve the problem? — Nicholas, Mar 20 '19 at 16:27
i also had similar issue, but in my case it was due to stale values from previous renders, i had passed empty dependency array in useCallback & was updating state unnecessarily. — Wasit Shafi, Aug 04 '21 at 19:53
I had a similar error but that was due to an api whose invocation was failing and there were automatic retires on the api. — Yug Singh, Jan 17 '22 at 16:19

GregL · Accepted Answer · 2019-03-20T17:44:58.020

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.

your answer resolves the problem described in the question however the variable `open` always `false` — Slim, Mar 20 '19 at 17:08
@para008 I added a comprehensive [demo](https://codesandbox.io/embed/kwly8y4l0v?fontsize=14) to prove that it works as it should. — GregL, Mar 20 '19 at 17:45
I don't find my mistake because `open`always false for me however !!variant is false at the beginning then it becomes true — Slim, Mar 20 '19 at 18:37
maybe I should ask it in another question. Thank for you answer. — Slim, Mar 20 '19 at 19:14
@para008 Check out the updated demo. It should fully work now, and simulate when `variant` is not set. — GregL, Mar 20 '19 at 19:20

score 140 · Answer 2 · edited Sep 27 '21 at 21:51

140

In SnackbarContentWrapper you need to change

<IconButton
  key="close"
  aria-label="Close"
  color="inherit"
  className={classes.close}
  onClick={onClose} // change this
>

to

<IconButton
  key="close"
  aria-label="Close"
  color="inherit"
  className={classes.close}
  onClick={() => onClose()} // to this
>

So that it only fires the action when you click.

Alternatively, you could just curry the handleClose in SignInContainer to

const handleClose = () => (reason) => {
  if (reason === 'clickaway') {
    return;
  }
  setSnackBarState(false)
};

It's the same.

edited Sep 27 '21 at 21:51

Ben Steward

2,338
1
13
23

answered Mar 20 '19 at 16:42

Josh Pittman

7,024
7
38
66

14

Thanks, works for me. This is what I was looking for onClick={() => onClose} . – jeetdeveloper Sep 18 '19 at 06:45
Yep, thanks; update my event call from onClick={onClose} to onClick={() => onClose} Worked fine. – José Jesús Ochoa Torres Aug 11 '20 at 04:57
thanks actually even i forgot this, now i remembered. – Rohan Devaki Oct 08 '20 at 11:45
5

can someone tell me what to google in order to understand the difference between onClick={() => onClose} and onClick={onClose}? Thanks! – picklepick Nov 13 '20 at 17:53
1

Googling something to the effect of "binding inline functions in react" should get you where you need to go. you will have to learn about 'this' in js and currying functions, it's quite a rabbit hole. – Josh Pittman Dec 15 '20 at 08:33
1

Exactly what worked for me. Simple, yet effective answer. Much obliged. – Gishas Aug 07 '21 at 13:34
1

Thanks, this is exactly I was looking. – Bino Nov 01 '21 at 07:07
1

tell us more about the curry technique – Snowmanzzz Nov 17 '21 at 12:18
3

difference between onClick={() => onClose} and onClick={onClose}? – Snowmanzzz Nov 18 '21 at 01:51
1

I am just learning react and this worked for me! – Raju Ahmed Dec 11 '21 at 18:36

score 10 · Answer 3 · answered Nov 24 '19 at 16:12

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>
    )
}

score 7 · Answer 4 · answered May 04 '22 at 04:15

7

While calling function add event like this

before

 <button onClick={ decrementCount() }>-</button>

after

 <button onClick={ () => decrementCount() }>-</button>

answered May 04 '22 at 04:15

smit agravat

223
2
9

This helped me, but why this needs to be done? Just want to clear my concepts as I am new to JS. – codeomascot Jul 13 '22 at 14:20

score 4 · Answer 5 · edited Oct 22 '21 at 06:52

4

You need to add an event, before call your handleFunction like this:

function SingInContainer() {
..
..
handleClose = () => {
}

return (
    <SnackBar
        open={open}
        handleClose={() => handleClose}
        variant={variant}
        message={message}
        />
    <SignInForm/>
  )
}

edited Oct 22 '21 at 06:52

Ravindra S. Patil

11,757
3
13
40

answered Aug 25 '20 at 03:35

Cristian marín

319
2
3

score 3 · Answer 6 · answered Dec 12 '21 at 10:03

From what I've gathered, It seems like the error is caused when we call so many functions.

mostly setState()

One way around this will be to set the states inside a function instead of calling the setState directly by onClick for example.

Using a lot of states like this probably causes react to re-render multiple times, causing this error.

score 3 · Answer 7 · answered Jun 18 '22 at 11:30

3

Just remember if you passed a function with parentheses, the function would execute every time the component renders. To prevent this, try to put ()=> in front of your function.

answered Jun 18 '22 at 11:30

goodhyun

4,814
3
33
25

Harsh Patel · Answer 8 · 2020-06-29T04:42:19.067

I also have the same problem, and the solution is I didn't bind the event in my onClick. so when it renders for the first time and the data is more, which ends up calling the state setter again, which triggers React to call your function again and so on.

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)} // or you can call like this:onClick={() => clickEvent(10)} 
        >
    </div>
)
}

score 2 · Answer 9 · edited Jul 09 '23 at 12:41

2

You can prevent this error by using hooks inside your function.

edited Jul 09 '23 at 12:41

righteousness_wealth

511
4
13

answered Dec 21 '20 at 18:52

Sagara Harasgama

87
1
2

score 2 · Answer 10 · answered Feb 16 '23 at 03:02

2

So basically, you just want to make sure that you're calling your state setter as a callback to an event listener, so that way the function doesn't fire off until there's an action.

Something like this:

onClick={() => stateSetterFunction()}

answered Feb 16 '23 at 03:02

Davidson_015

21
3

score 1 · Answer 11 · answered Jun 02 '22 at 20:56

1

I had a similar issue, however my scenario was different. useEffect(()=>{},[]) saved me from this error.

answered Jun 02 '22 at 20:56

Hayeul Tanjib

311
3
7

score 1 · Answer 12 · answered Feb 03 '23 at 09:52

THIS ERROR IS BECAUSE YOU ARE USING PARANTHESIS AFTER FUNCTION NAME IN RETURN.

import React, { useState } from "react";

const Count = () => { const [num, setnum] = useState(0)

const increment = () => {
    setnum((prev) => {
        return prev + 1
    })
    setnum((prev) => {
        return prev + 1
    })

}

const decrement = () => {
    setnum(num - 1)
}

return (
    <div>
        <button onClick={increment}>+</button>
        {num}
        <button onClick={decrement}>-</button>
    </div>
)

} export default Count;

DONT USE ::: onClick= {increment()} or onClick= {decrement()} in Return Section

score 1 · Answer 13 · answered Jul 08 '23 at 12:23

1

just one tip , always call function upon some action like this onClick{()=>func()} and not onClick{func()} as the latter might hit up re-render issue due to multiple calls

answered Jul 08 '23 at 12:23

Saksham Misra

11
1

score 0 · Answer 14 · answered Sep 20 '21 at 12:05

0

In my case its cause because of wrong attribute name onblur={setFieldTouched('firstName')} -->onBlur={()=>setFieldTouched('firstName')} . after correcting attribute name error gone

answered Sep 20 '21 at 12:05

Mohd Qasim

896
9
20

score 0 · Answer 15 · edited Nov 13 '21 at 04:06

0

I think you can do this. At my place it works without any problem.

const handleClose = (reason) => {
  if (reason === 'clickaway') {
    return;
  }
  setSnackBarState(false);
};

<SnackBar
    open={open}
    handleClose={()=>handleClose(r)}
    variant={variant}
    message={message}
    />

edited Nov 13 '21 at 04:06

tdy

36,675
19
86
83

answered Nov 12 '21 at 14:01

Emma Nya

1

score 0 · Answer 16 · answered Mar 23 '22 at 06:13

0

See That you have included preventDefault() or not. In my case, I forgot to use that and later I find that mistake.

answered Mar 23 '22 at 06:13

Praveen

1

score 0 · Answer 17 · answered Oct 21 '22 at 03:13

You're probably calling your setState right away when you pass It in, make sure you're not setting it like this:

variable={setState()}

instead, do it like so:

variable={setState()}

sometimes, you have your setState in a function and you're calling the function directly when you pass it in which causes this issue.

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

17 Answers17

Comprehensive Demo

Linked

Related