too many re-renders. react limits the number of renders to prevent an infinite loop. UseEffect

Question

Whenever I try to render my component, I am getting this error :

too many re-renders. react limits the number of renders to prevent an infinite loop.

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 "notifications", using useState react hook. Here's my 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 = () => setShow(false);
  const handleShow = () => setShow(true);
  const [notifications, setnotifictions] = useState([])
  const [password, setpassword] = useState("")
  var user = {
    username: username
  }
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();

  useEffect(() => {
    const fetchnoti = async () => {
      await axios.post('/api/getnoti', user, {cancelToken: source.token})
        .then(res => {
          console.log(res)
          setnotifictions(res.data)
        })
        .catch(err => {
          if (axios.isCancel(err)) {
            console.log('Request canceled', err.message);
          }
          else console.log(err)
        })
      
    }
    
    fetchnoti();

    return () => {
        source.cancel()
    }
  }, [])
  
  
  function accept(noti){
    var param = {
      noti: noti,
      password: password
    }
    axios.post('/api/accepttxn', param)
      .then(res => {
        console.log(res)
        setresponse(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  }

  function accepttxn(noti){
    handleShow(); 
            
            
            setresponse([]); 
            setpassword("");
    return(
      <div>

        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Enter Password to Proceed</Modal.Title>
          </Modal.Header>
          <Modal.Body><input type="password" value={password} onChange={(event) => setpassword(event.target.value)}/></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="success" onClick={() => {accept(noti)}}>
              Proceed to Accept
            </Button>
            {response}
          </Modal.Footer>
        </Modal>
      </div>
    );
  }

  function reject(noti){
    var param = {
      noti: noti,
      password: password
    }
    axios.post('/api/rejecttxn', param)
      .then(res => {
        console.log(res)
        setresponse(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  }

  function rejecttxn(noti){
    handleShow();
            
            
    setresponse([]); 
    setpassword("");
    return(
      <div>

        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Enter Password to Proceed</Modal.Title>
          </Modal.Header>
          <Modal.Body><input type="password" value={password} onChange={(event) => setpassword(event.target.value)}/></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="danger" onClick={() => {reject(noti)}}>
              Proceed to Reject
            </Button>
            {response}
          </Modal.Footer>
        </Modal>
      </div>
    );
    
  }

  const notis = notifications.map((noti) => {
    return(
      <Card key={noti.id}>
        <Card.Body>
          <Card.Text>
            Sender: {noti.sender}
          </Card.Text>
          <Card.Text>
            Amount: {noti.amount}
          </Card.Text>
          <Card.Text>
            {noti.message ? <div>Message: {noti.message}</div> : null}
          </Card.Text>
          <Button variant="primary" 
          onClick={
             
            accepttxn(noti)
            
            
            
          }>Accept</Button>
          <Button variant="danger" 
          onClick={
            
            rejecttxn(noti)
            
            
            
          }>Reject</Button>

        </Card.Body>
      </Card>
    )

  })

  return (
    <div>
      {notis.length ? <div>{notis}</div> : <h1>No new notifications</h1>}
    </div>
  );
}

export default Notifications;

Can anyone help me out?

Answer 1

It's not the useEffect probably, you have a button which calls a function whenever it renders:

<Button variant="danger" onClick={rejecttxn(noti)}>Reject</Button>

You could rewrite the function to return a function, it improves performance because you may re-render components that does not need to be rerendered when using inline functions, check below example:

function rejecttxn(noti){
    return function() {
    handleShow();
            
            
    setresponse([]); 
    setpassword("");
    return (
      <div>

        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Enter Password to Proceed</Modal.Title>
          </Modal.Header>
          <Modal.Body><input type="password" value={password} onChange={(event) => setpassword(event.target.value)}/></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="danger" onClick={() => {reject(noti)}}>
              Proceed to Reject
            </Button>
            {response}
          </Modal.Footer>
        </Modal>
      </div>
    );
   } 
  }

Or using arrow functions:

const rejecttxn = (noti) => () => {
    handleShow();


    setresponse([]); 
    setpassword("");
    return (
      <div>

        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Enter Password to Proceed</Modal.Title>
          </Modal.Header>
          <Modal.Body><input type="password" value={password} onChange={(event) => setpassword(event.target.value)}/></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="danger" onClick={() => {reject(noti)}}>
              Proceed to Reject
            </Button>
            {response}
          </Modal.Footer>
        </Modal>
      </div>
    );
   } 
  }