fix: perf problem of Action flyout menu

Composer/packages/client/src/hooks/useElectronFeatures.ts

@@ -1,23 +1,38 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import { getEditorAPI } from '@bfc/shared';
 
-export const useElectronFeatures = (
-  actionSelected: boolean,
-  flowFocused: boolean,
-  canUndo: boolean,
-  canRedo: boolean
-) => {
-  // Sync selection state to Electron main process
-  useEffect(() => {
+export const useElectronFeatures = (actionSelected: boolean, canUndo: boolean, canRedo: boolean) => {
+  const flowEditorFocused = useRef(false);
+
+  const sendStatus = () => {
     if (!window.__IS_ELECTRON__) return;
     if (!window.ipcRenderer || typeof window.ipcRenderer.send !== 'function') return;
+    window.ipcRenderer.send('composer-state-change', {
+      actionSelected,
+      flowFocused: flowEditorFocused.current,
+      canUndo,
+      canRedo,
+    });
+  };
+
+  const onFocusFlowEditor = () => {
+    flowEditorFocused.current = true;
+    sendStatus();
+  };
 
-    window.ipcRenderer.send('composer-state-change', { actionSelected, flowFocused, canUndo, canRedo });
-  }, [actionSelected, flowFocused, canUndo, canRedo]);
+  const onBlurFlowEditor = () => {
+    flowEditorFocused.current = false;
+    sendStatus();
+  };
+
+  // Sync selection state to Electron main process
+  useEffect(() => {
+    sendStatus();
+  }, [actionSelected, canUndo, canRedo]);
 
   // Subscribe Electron app menu events (copy/cut/del/undo/redo)
   useEffect(() => {
@@ -41,4 +56,9 @@ export const useElectronFeatures = (
       }
     });
   }, []);
+
+  return {
+    onFocusFlowEditor,
+    onBlurFlowEditor,
+  };
 };

Composer/packages/client/src/pages/design/DesignPage.tsx

@@ -280,7 +280,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     }
   };
 
-  const [flowEditorFocused, setFlowEditorFocused] = useState(false);
   const { actionSelected, showDisableBtn, showEnableBtn } = useMemo(() => {
     const actionSelected = Array.isArray(visualEditorSelection) && visualEditorSelection.length > 0;
     if (!actionSelected) {
@@ -292,7 +291,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     return { actionSelected, showDisableBtn, showEnableBtn };
   }, [visualEditorSelection]);
 
-  useElectronFeatures(actionSelected, flowEditorFocused, canUndo(), canRedo());
+  const { onFocusFlowEditor, onBlurFlowEditor } = useElectronFeatures(actionSelected, canUndo(), canRedo());
 
   const EditorAPI = getEditorAPI();
   const toolbarItems: IToolbarItem[] = [
@@ -640,8 +639,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                       <EditorExtension plugins={pluginConfig} projectId={projectId} shell={shellForFlowEditor}>
                         <VisualEditor
                           openNewTriggerModal={openNewTriggerModal}
-                          onBlur={() => setFlowEditorFocused(false)}
-                          onFocus={() => setFlowEditorFocused(true)}
+                          onBlur={() => onBlurFlowEditor()}
+                          onFocus={() => onFocusFlowEditor()}
                         />
                       </EditorExtension>
                     )}