fix(react-hooks): add missing service listener cleanup

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>
   );
 };

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>
+  );
+};

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;