From 4783a4c4e10211ab06f606744b3bd8b075b6a0ed Mon Sep 17 00:00:00 2001
From: Norbert Herczeg <noherczeg@gmail.com>
Date: Mon, 6 Mar 2023 12:58:35 +0100
Subject: [PATCH] fix(react-hooks): add missing service listener cleanup

---
 .../react-systemjs/packages/app/src/App.tsx   | 20 ++++--------------
 .../packages/app/src/FallbackComponent.tsx    | 21 +++++++++++++++++++
 .../react-hooks/src/useTrackService.ts        |  4 ++++
 3 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 examples/react-systemjs/packages/app/src/FallbackComponent.tsx

diff --git a/examples/react-systemjs/packages/app/src/App.tsx b/examples/react-systemjs/packages/app/src/App.tsx
index b1a76aff..1ad75c24 100644
--- a/examples/react-systemjs/packages/app/src/App.tsx
+++ b/examples/react-systemjs/packages/app/src/App.tsx
@@ -1,30 +1,18 @@
 import type { FC } from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { OBJECTCLASS } from '@pandino/pandino-api';
-import { ComponentProxy, useTrackService } from '@pandino/react-hooks';
+import { ComponentProxy } from '@pandino/react-hooks';
 import { CUSTOM_COMPONENT_INTERFACE_KEY } from '@react-systemjs/component-api';
-import { SOME_SERVICE_INTERFACE_KEY, SomeService } from './service';
+import { FallbackComponent } from './FallbackComponent';
 
 export const App: FC = () => {
   const [firstName] = useState<string>('John');
-  const { service: someService } = useTrackService<SomeService>(`(${OBJECTCLASS}=${SOME_SERVICE_INTERFACE_KEY})`);
-  const text = useMemo<string | undefined>(() => someService?.someMethod(), [someService]);
 
   console.count('Rendering App.');
 
-  useEffect(() => {
-      console.info(`SomeService implementation: ${someService}`);
-  }, [someService]);
-
-  useEffect(() => {
-    console.info(`text: ${text}`);
-  }, [text]);
-
   return (
     <ComponentProxy filter={`(${OBJECTCLASS}=${CUSTOM_COMPONENT_INTERFACE_KEY})`} firstName={firstName}>
-      <div className={'fallback'}>fallback for: {firstName}</div>
-      <div className={'service'}>SomeService test: {someService?.someMethod()}</div>
-      <div className={'text'}>Text: {text}</div>
+        <FallbackComponent firstName={firstName} />
     </ComponentProxy>
   );
 };
diff --git a/examples/react-systemjs/packages/app/src/FallbackComponent.tsx b/examples/react-systemjs/packages/app/src/FallbackComponent.tsx
new file mode 100644
index 00000000..0663880e
--- /dev/null
+++ b/examples/react-systemjs/packages/app/src/FallbackComponent.tsx
@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { OBJECTCLASS } from '@pandino/pandino-api';
+import { useTrackService } from '@pandino/react-hooks';
+import type { CustomComponent } from '@react-systemjs/component-api';
+import { SOME_SERVICE_INTERFACE_KEY, SomeService } from './service';
+
+export const FallbackComponent: CustomComponent = (props) => {
+  const { service: someService } = useTrackService<SomeService>(`(${OBJECTCLASS}=${SOME_SERVICE_INTERFACE_KEY})`);
+  const text = useMemo<string | undefined>(() => someService?.someMethod(), [someService]);
+
+  console.count('Rendering FallbackComponent.');
+  console.info(`SomeService implementation: ${someService}`);
+
+  return (
+    <div>
+      <div className={'fallback'}>fallback for: {props.firstName}</div>
+      <div className={'service'}>SomeService test: {someService?.someMethod()}</div>
+      <div className={'text'}>Text: {text}</div>
+    </div>
+  );
+};
diff --git a/packages/@pandino/react-hooks/src/useTrackService.ts b/packages/@pandino/react-hooks/src/useTrackService.ts
index 2ebcaaf8..111ede8a 100644
--- a/packages/@pandino/react-hooks/src/useTrackService.ts
+++ b/packages/@pandino/react-hooks/src/useTrackService.ts
@@ -64,6 +64,10 @@ export const useTrackService: ServiceTrackerHook = <T>(filter: string) => {
         service: getService(filter),
       });
     }
+
+    return () => {
+      bundleContext.removeServiceListener(listener);
+    };
   }, [filter]);
 
   return tracker;