How to properly init web3wallet event listeners in React app?

[ECBSJ]

What is the best way to initialize & format the web3wallet event listeners in a react app?

I've been playing around with the web3wallet SDK using React. I've set up my web3wallet event listeners, but noticed that for example, when "session_request" is emitted from the dapp, my app would trigger the event listener and callback function multiple times.

Below is the MRE that I am playing with. The event listener for web3wallet?.on('session_request', async (event) => { is on line 134.

[glitch-txs]

Hi, you should run events either outside components or inside a useEffect hook. React components get re-rendered when a state changes, which is making you event functions being called multiple times.