chore(compass-home): add deps to avoid extra listener refreshes (#2575)

Author: Anemy

packages/compass-home/src/components/home.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useEffect, useReducer } from 'react';
+import React, { useCallback, useEffect, useReducer } from 'react';
 import {
   DataService,
   getConnectionTitle,
@@ -200,7 +200,7 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
     });
   }
 
-  function onDataServiceDisconnected() {
+  const onDataServiceDisconnected = useCallback(() => {
     const StatusAction = appRegistry.getAction(
       AppRegistryActions.STATUS_ACTIONS
     ) as StatusActionType | undefined;
@@ -209,7 +209,7 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
     });
     updateTitle(appName);
     StatusAction?.done();
-  }
+  }, [appRegistry, appName]);
 
   useEffect(() => {
     if (isConnected) {
@@ -248,7 +248,7 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
       );
       appRegistry.removeListener('all-collection-tabs-closed', onAllTabsClosed);
     };
-  });
+  }, [appRegistry, onDataServiceDisconnected]);
 
   if (isConnected) {
     return (