fix: ipcRenderer listener not being removed in hook

src/main/preload.ts

@@ -1,7 +1,32 @@
+/* eslint-disable no-bitwise */
 /* eslint no-unused-vars: off */
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 import { IpcChannels } from './ipc';
 
+export class IpcSubscription {
+  public readonly channel: IpcChannels;
+
+  public readonly subscription: any;
+
+  public constructor(channel: IpcChannels, subscription: any) {
+    this.channel = channel;
+    this.subscription = subscription;
+  }
+
+  public remove() {
+    ipcRenderer.removeListener(this.channel, this.subscription);
+  }
+}
+
+function guidGenerator() {
+  const S4 = () => {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  };
+  return `${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`;
+}
+
+const subscriptions: Map<string, IpcSubscription> = new Map();
+
 const electronHandler = {
   ipcRenderer: {
     sendMessage(channel: IpcChannels, ...args: any[]) {
@@ -12,16 +37,28 @@ const electronHandler = {
         func(...args);
       ipcRenderer.on(channel, subscription);
 
-      return () => {
-        ipcRenderer.removeListener(channel, subscription);
-      };
+      const sub = new IpcSubscription(channel, subscription);
+      const id = guidGenerator();
+
+      subscriptions.set(id, sub);
+      return id;
     },
     once(channel: IpcChannels, func: (...args: any[]) => void) {
       ipcRenderer.once(channel, (_event, ...args) => func(...args));
     },
     invoke(channel: IpcChannels, ...args: any[]): Promise<any> {
       return ipcRenderer.invoke(channel, ...args);
     },
+    removeListener(id: string) {
+      const sub = subscriptions.get(id);
+      if (sub) {
+        ipcRenderer.removeListener(sub.channel, sub.subscription);
+        subscriptions.delete(id);
+      }
+    },
+    removeAllListeners(channel: IpcChannels) {
+      ipcRenderer.removeAllListeners(channel);
+    },
   },
 };
 

src/renderer/hooks/useMessages.ts

@@ -6,15 +6,6 @@ export default function useMessages(channel: RendererChannel | null) {
   const [messages, setMessages] = useState<Message[]>([]);
 
   useEffect(() => {
-    window.electron.ipcRenderer.on(
-      'discord:gateway:message-create',
-      (message: Message) => {
-        if (message.channel_id !== channel?.id) return;
-
-        setMessages((old) => [message, ...old]);
-      },
-    );
-
     if (channel) {
       channel
         .fetchMessages()
@@ -24,6 +15,19 @@ export default function useMessages(channel: RendererChannel | null) {
         })
         .catch((err) => console.error(err));
     }
+
+    const subscription = window.electron.ipcRenderer.on(
+      'discord:gateway:message-create',
+      (message: Message) => {
+        if (message.channel_id !== channel?.id) return;
+
+        setMessages((old) => [message, ...old]);
+      },
+    );
+
+    return () => {
+      window.electron.ipcRenderer.removeListener(subscription);
+    };
   }, [channel]);
 
   return messages;