title: too many re-renders. react limits the number of renders to prevent an infinite loop. UseEffect
body: <p>Whenever I try to render my component, I am getting this error :</p>
  <blockquote>
  <p>too many re-renders. react limits the number of renders to prevent an
  infinite loop.</p>
  </blockquote>
  <p>I have tried using axios cancelToken and square brackets in useEffect hook. But nothing works. The code requests an array of notifications from server and store it in a state variable &quot;notifications&quot;, using useState react hook. Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {useState, useEffect} from 'react';
  import NavbarComponent from './NavbarComponent';
  import { Card, Button, Modal } from "react-bootstrap";
  import axios from 'axios';
  
  function Notifications({username}) {
    const [show, setShow] = useState(false);
    const [response, setresponse] = useState([])
    const handleClose = () =&gt; setShow(false);
    const handleShow = () =&gt; setShow(true);
    const [notifications, setnotifictions] = useState([])
    const [password, setpassword] = useState("")
    var user = {
      username: username
    }
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
  
    useEffect(() =&gt; {
      const fetchnoti = async () =&gt; {
        await axios.post('/api/getnoti', user, {cancelToken: source.token})
          .then(res =&gt; {
            console.log(res)
            setnotifictions(res.data)
          })
          .catch(err =&gt; {
            if (axios.isCancel(err)) {
              console.log('Request canceled', err.message);
            }
            else console.log(err)
          })
        
      }
      
      fetchnoti();
  
      return () =&gt; {
          source.cancel()
      }
    }, [])
    
    
    function accept(noti){
      var param = {
        noti: noti,
        password: password
      }
      axios.post('/api/accepttxn', param)
        .then(res =&gt; {
          console.log(res)
          setresponse(res.data)
        })
        .catch(err =&gt; {
          console.log(err)
        })
    }
  
    function accepttxn(noti){
      handleShow(); 
              
              
              setresponse([]); 
              setpassword("");
      return(
        &lt;div&gt;
  
          &lt;Modal show={show} onHide={handleClose}&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Enter Password to Proceed&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt;&lt;input type="password" value={password} onChange={(event) =&gt; setpassword(event.target.value)}/&gt;&lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button variant="secondary" onClick={handleClose}&gt;
                Close
              &lt;/Button&gt;
              &lt;Button variant="success" onClick={() =&gt; {accept(noti)}}&gt;
                Proceed to Accept
              &lt;/Button&gt;
              {response}
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  
    function reject(noti){
      var param = {
        noti: noti,
        password: password
      }
      axios.post('/api/rejecttxn', param)
        .then(res =&gt; {
          console.log(res)
          setresponse(res.data)
        })
        .catch(err =&gt; {
          console.log(err)
        })
    }
  
    function rejecttxn(noti){
      handleShow();
              
              
      setresponse([]); 
      setpassword("");
      return(
        &lt;div&gt;
  
          &lt;Modal show={show} onHide={handleClose}&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Enter Password to Proceed&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt;&lt;input type="password" value={password} onChange={(event) =&gt; setpassword(event.target.value)}/&gt;&lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button variant="secondary" onClick={handleClose}&gt;
                Close
              &lt;/Button&gt;
              &lt;Button variant="danger" onClick={() =&gt; {reject(noti)}}&gt;
                Proceed to Reject
              &lt;/Button&gt;
              {response}
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
      
    }
  
    const notis = notifications.map((noti) =&gt; {
      return(
        &lt;Card key={noti.id}&gt;
          &lt;Card.Body&gt;
            &lt;Card.Text&gt;
              Sender: {noti.sender}
            &lt;/Card.Text&gt;
            &lt;Card.Text&gt;
              Amount: {noti.amount}
            &lt;/Card.Text&gt;
            &lt;Card.Text&gt;
              {noti.message ? &lt;div&gt;Message: {noti.message}&lt;/div&gt; : null}
            &lt;/Card.Text&gt;
            &lt;Button variant="primary" 
            onClick={
               
              accepttxn(noti)
              
              
              
            }&gt;Accept&lt;/Button&gt;
            &lt;Button variant="danger" 
            onClick={
              
              rejecttxn(noti)
              
              
              
            }&gt;Reject&lt;/Button&gt;
  
          &lt;/Card.Body&gt;
        &lt;/Card&gt;
      )
  
    })
  
    return (
      &lt;div&gt;
        {notis.length ? &lt;div&gt;{notis}&lt;/div&gt; : &lt;h1&gt;No new notifications&lt;/h1&gt;}
      &lt;/div&gt;
    );
  }
  
  export default Notifications;</code></pre>
  </div>
  </div>
  </p>
  <p>Can anyone help me out?</p>