Unregister favourite listeners automatically

src/hooks/useFavouriteMessages.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 export interface FavouriteStorage {
     eventId: string;
@@ -63,6 +63,8 @@ export default function useFavouriteMessages() {
         ioElementFavouriteMessages = loadFavourites();
     }
 
+    const myListeners = useRef<(() => void)[]>([]);
+
     const isFavourite = (eventId: string): boolean => {
         return ioElementFavouriteMessages.some((f) => f.eventId === eventId);
     };
@@ -96,20 +98,26 @@ export default function useFavouriteMessages() {
         return JSON.parse(JSON.stringify(ioElementFavouriteMessages));
     }, []);
 
-    function registerFavouritesChangedListener(listener: () => void) {
-        favouritesChangedListeners.push(listener);
-    }
-
-    function unregisterFavouritesChangedListener(listener: () => void) {
-        favouritesChangedListeners = favouritesChangedListeners.filter((l) => l !== listener);
-    }
+    const registerFavouritesChangedListener = useCallback(
+        (listener: () => void) => {
+            favouritesChangedListeners.push(listener);
+            myListeners.current.push(listener);
+        },
+        [myListeners],
+    );
+
+    useEffect(() => {
+        const myLists = myListeners.current;
+        return () => {
+            favouritesChangedListeners = favouritesChangedListeners.filter((l) => !myLists.find(l));
+        };
+    }, []);
 
     return {
         getFavouriteMessages,
         isFavourite,
         toggleFavourite,
         clearFavouriteMessages,
         registerFavouritesChangedListener,
-        unregisterFavouritesChangedListener,
     };
 }