Event listeners and filters

[nolanjannotta]

Hey all,

I'm having trouble with event listeners and filters. My dapp is a chainlink UI, I'm listening to events emitted from my own contract as well as the Link Token contract on kovan to then call functions that update my UI. The event listeners are sometimes triggered between 4 to over 1000 times. Is there some sort of feedback loop going on?

These are my filters and listeners for Transfer events emitted from the LINK contract:

const filterTo = chainlinkToken.filters.Transfer(null, props.contractData.address)

chainlinkToken.on(filterTo, () => {
    networkData()
    console.log("to")
    

})
const filterFrom = chainlinkToken.filters.Transfer(props.contractData.address)

chainlinkToken.on(filterFrom, () => {
    networkData()
    console.log('From')

})

this is another listener I use for an event emitted from my own contract (im using chainlinks API calls and fetching data from an ISS API)

chainlinkui.on("ISSlocation", (event) => {
    setLocation(event.toString())
    setLoading(false)
    console.log("iss location event")
});

this is my console output: "to" is logged when I send LINK to my contract, "from" is logged when I use a function that spends LINK from my contract.

another example:

"iss location event" is emitted from my contract when the chainlink oracle responds with data.

clearly something is wrong as its definitely not possible for this many events to be emitted. I tried following the documentation but surely I'm missing something. is it some kind of feedback loop? Another question is, where do you structure/put event listeners in a react app? I have them in child components, should they all be together in the parent component and update and pass data to children via props?

Thanks in advance!

[zemse]

Are you sure that you're connected to testnet, because on mainnet every block can introduce a lot of events (due to uniswap swaps for e.g.).

where do you structure/put event listeners in a react app?

You should have the event listener in a parent one component that updates the state. Also, be sure to unsubscribe the event when the component unmounts (otherwise you'll have multiple instances of the listeners around which will together run the call back multiple times).

[nolanjannotta]

hey thanks for replying, I've actually been helped on another site, but id love your opinion. I'm definitely on a test net, my problem was I wasnt removing the listeners when it unmounts like you said, so listener instances were piling up. Before I had the listeners by themselves in my code. Then I moved them into a useEffect hook, and used contract.removeAllListeners () in the return function of the useEffect. Is there a better way? sometimes I still get weird instances when it gets called tons of times, but im still tinkering with it.