Search code examples
javascriptevent-listenerweb3js

MaxListenersExceedWarning: Possible EventEmitter memory leak detected

A similar issue to the following however I cannot seem to code my way out of it.

Link to similar issue Possible EventEmitter memory leak detected without EventEmiter

Please find code underneath:

I suspect that the error handling in the 'input onchange' of CreateThread component are causing the issues but at this point I am really not sure about anything anymore. That being said it could be that a connect button in the header could be the culprit being that the console hints at the 'accountChanged Listeners' however I do not recall adding anything unusual. (Adding image for clarity)

enter image description here

Could anyone please shine their light on this issue? I am already hugely appreciative!

CreateThread.js component

import { abi, contractAddresses } from "../constants";
import { useMoralis } from "react-moralis";
import { useEffect, useState } from "react";

export default function startThread() {
  const { chainId: chainIdHex, isWeb3Enabled } = useMoralis();
  const chainId = parseInt(chainIdHex);
  const threadAddress =
    chainIdHex in contractAddresses ? contractAddresses[chainId][0] : null;
  const [threadtitle, setthreadtitle] = useState("");
  const [threadpost, setthreadpost] = useState("");

  const { runContractFunction: createThread } = useWeb3Contract({
    abi: abi,
    contractAddress: threadAddress, 
    functionName: "createThread",
    params: { _threadTitle: threadtitle, _threadPost: threadpost }, //these parameters should come from the input boxes (document.getElementById("threadtitle").value, etc.)
    msgValue: {},
  });

  async function Update() {
    const response = await createThread();
    console.log(response);
  }


 useEffect(() => {
    if (isWeb3Enabled) {
    }
  }, []);

  return (
    <div>
      <div className="bg-slate-400 w-screen h-96 py-4 px-2">
        <div>Threadtitle</div>
        <input
          className=" w-11/12"
          id="threadtitle"
          onChange={(e) => setthreadtitle(e.target.value)}
        ></input>
        <div>Threadpost</div>
        <input
          className=" w-11/12 h-24"
          id="threadpost"
          onChange={(e) => setthreadpost(e.target.value)}
        ></input>
        <div className="py-4">
          <button
            className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
            onClick={Update}
          >
            Create Thread
          </button>
        </div>
      </div>
    </div>
  );
}

Header.js

import { ConnectButton } from "web3uikit";

export default function Header() {
  return (
    <div className="p-5 border-b-2 flex flex-row bg-slate-400">
      <h1 className="py-4 px-4 font-blog text-3xl">
        deAgora - Forum for the people, by the people
      </h1>
      <div className="ml-auto py-2 px-4">
        <ConnectButton moralisAuth={false}></ConnectButton>
      </div>
    </div>
  );
}
Solution

  • The issue has seemingly been solved by not constantly rerendering the component which includes the web3uikit connectbutton (which in the above case is the header). I get the sense that on every render the connectbutton adds a listener every time the connectbutton is rendered and does not remove that listener on rerender (someone more with more knowledge on the matter should confirm tho).

    I have moved the header out of the routing scheme to always show and therefore it does not rerender on every action performed in the front end (like browsing through the navbar). This seems to have solved the issue.