title: Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
body: <p>I'm trying to add a snackBar in order to display a message whenever a user signIn or not.
  SnackBar.jsx:</p>
  
  <pre><code>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 =&gt; ({
    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 (
      &lt;SnackbarContent
        className={classNames(classes[variant], className)}
        aria-describedby="client-snackbar"
        message={(
          &lt;span className={classes.message}&gt;
            &lt;Icon className={classNames(classes.icon, classes.iconVariant)} /&gt;
            {message}
          &lt;/span&gt;
        )}
        action={[
          &lt;IconButton
            key="close"
            aria-label="Close"
            color="inherit"
            className={classes.close}
            onClick={onClose}
          &gt;
            &lt;CloseIcon className={classes.icon} /&gt;
          &lt;/IconButton&gt;
        ]}
        {...other}
      /&gt;
    );
  }
  
  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
  }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Snackbar
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          open={open}
          autoHideDuration={6000}
          onClose={handleClose}
        &gt;
          &lt;MySnackbarContentWrapper
            onClose={handleClose}
            variant={variant}
            message={message}
          /&gt;
        &lt;/Snackbar&gt;
      &lt;/div&gt;
    );
  };
  
  CustomizedSnackbar.propTypes = {
    open: PropTypes.bool.isRequired,
    handleClose: PropTypes.func.isRequired,
    variant: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired
  };
  
  export default CustomizedSnackbar;
  </code></pre>
  
  <p>SignInFormContainer.jsx:</p>
  
  <pre><code>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}) =&gt; {
      const [open, setSnackBarState] = useState(false);
      const handleClose = (reason) =&gt; {
          if (reason === 'clickaway') {
            return;
          }
          setSnackBarState(false)
  
        };
  
      if (variant) {
          setSnackBarState(true);
      }
      return (
          &lt;div&gt;
          &lt;SnackBar
              open={open}
              handleClose={handleClose}
              variant={variant}
              message={message}
              /&gt;
          &lt;SignInForm/&gt;
          &lt;/div&gt;
      )
  }
  
  SingInContainer.propTypes = {
      variant: PropTypes.string.isRequired,
      message: PropTypes.string.isRequired
  }
  
  const mapStateToProps = (state) =&gt; {
      const {variant, message } = state.snackBar;
  
      return {
          variant,
          message
      }
  }
  
  export default connect(mapStateToProps)(SingInContainer);
  </code></pre>
  
  <p>When I run the application I got this error:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>The problem is due to the SnackBar component. I use the <code>useState</code>hooks in order to change the state of the snackBar. Should I use a class and a <code>componentShouldUpdate</code> in order to not render multiple times?</p>