Why Web3 .GetReserves() is spamming my console?

Question

My code below gets the data correctly; however, there is one problem where when I try to get the reserves of a token. It spams the data over and over again to the point where I get booted from requesting data for a short period. (hope I alone am not crashing the RPC endpoint).

Here is the code [next.js/react]

export default function Chart(props) {
  const [pairAddress, setPairAddress] = useState(null);
  const [reserves, setReserves] = useState(null);
  console.log(pairAddress);
  const userAddy = props.Token;
  const decimals = props.Decimals;
  const Web3 = require('web3');
  const urlBsc = 'https://bsc-dataseed.binance.org';
  var web3Bsc = new Web3(urlBsc);
  let myContractPCSF = null;
  let myContractPCSR = null;
  const pancakeFactory = '0xcA143Ce32Fe78f1f7019d7d551a6402fC5350c73'
  var abiPCSF = [{
    "constant": true,
    "inputs": [{
        "internalType": "address",
        "name": "",
        "type": "address"
      },
      {
        "internalType": "address",
        "name": "",
        "type": "address"
      }
    ],
    "name": "getPair",
    "outputs": [{
      "internalType": "address",
      "name": "",
      "type": "address"
    }],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  }]
  var abiPCFR = [{
    "constant": true,
    "inputs": [],
    "name": "getReserves",
    "outputs": [{
        "internalType": "uint112",
        "name": "_reserve0",
        "type": "uint112"
      },
      {
        "internalType": "uint112",
        "name": "_reserve1",
        "type": "uint112"
      },
      {
        "internalType": "uint32",
        "name": "_blockTimestampLast",
        "type": "uint32"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  }]
  if (userAddy.length == 42 && userAddy[0] == '0' && userAddy[1] == 'x') {
    myContractPCSF = new web3Bsc.eth.Contract(abiPCSF, pancakeFactory, {
      from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe', // default from address
      gasPrice: '45031112648' // default gas price in wei
    });
    myContractPCSR = new web3Bsc.eth.Contract(abiPCFR, pairAddress, {
      from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe', // default from address
      gasPrice: '45031112648' // default gas price in wei
    })
    async function getContData() {
      let PCSFcontract = await myContractPCSF;
      let PCSRcontract = await myContractPCSR;
      PCSFcontract.methods.getPair(userAddy, '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c').call(function(error, result) {
        if (error) {
          console.log(error);
        }
        if (result != '0x0000000000000000000000000000000000000000') {
          setPairAddress(result)
          PCSRcontract.methods.getReserves().call(function(error, result) {
            if (error) {
              console.log(error);
            }
            if (result) {
              setReserves(result)
            }
          })
        }
        if (result == '0x0000000000000000000000000000000000000000') {
          PCSFcontract.methods.getPair(userAddy, '0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56').call(function(error, result) {
            if (error) {
              console.log(error);
            }
            if (result) {
              setPairAddress(result)
            }
          })
        }
      })
    }
    getContData()
  }
  return ( <
    div id = {
      styles.ChartWrapper
    } >
    </div>
  )
}

What am I doing wrong?

Answer 1

After some rethinking and testing I noticed that my state changes where causing an infinite loop.

I literally just learned how to use UseEffect seconds ago and it solved my issue.