From ae27acc477c0db09a6e2ba0084f85cecb048d2ce Mon Sep 17 00:00:00 2001
From: leilzh <leilzh@microsoft.com>
Date: Wed, 6 Jan 2021 15:58:23 +0800
Subject: [PATCH 1/2] fix: mutli re-render when editing in form editor

---
 .../client/src/components/ProjectTree/ProjectTree.tsx     | 4 +++-
 Composer/packages/client/src/pages/design/DesignPage.tsx  | 8 +++-----
 Composer/packages/client/src/shell/lgApi.ts               | 2 +-
 Composer/packages/client/src/shell/luApi.ts               | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 185fb55af7..78f1610aa6 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -239,7 +239,9 @@ export const ProjectTree: React.FC<Props> = ({
   }));
 
   useEffect(() => {
-    setSelectedLink(defaultSelected);
+    if (!isEqual(selectedLink, defaultSelected)) {
+      setSelectedLink(defaultSelected);
+    }
   }, [defaultSelected]);
 
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector);
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 2576821aae..1512ffa4ae 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -190,13 +190,13 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const [brokenSkillInfo, setBrokenSkillInfo] = useState<undefined | TreeLink>(undefined);
   const [brokenSkillRepairCallback, setBrokenSkillRepairCallback] = useState<undefined | (() => void)>(undefined);
   const [dialogJsonVisible, setDialogJsonVisibility] = useState(false);
-  const [currentDialog, setCurrentDialog] = useState<DialogInfo>(dialogs[0] as DialogInfo);
   const [warningIsVisible, setWarningIsVisible] = useState(true);
   const [breadcrumbs, setBreadcrumbs] = useState<Array<BreadcrumbItem>>([]);
 
   const shell = useShell('DesignPage', skillId ?? rootProjectId);
   const shellForFlowEditor = useShell('FlowEditor', skillId ?? rootProjectId);
   const shellForPropertyEditor = useShell('PropertyEditor', skillId ?? rootProjectId);
+  const currentDialog = (dialogs.find(({ id }) => id === dialogId) ?? dialogs[0]) as DialogInfo;
 
   useEffect(() => {
     if (!skillId) return;
@@ -207,11 +207,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   }, [skills, skillId]);
 
   useEffect(() => {
-    const currentDialog = dialogs.find(({ id }) => id === dialogId) as DialogInfo | undefined;
-    if (currentDialog) {
-      setCurrentDialog(currentDialog);
+    if (!warningIsVisible) {
+      setWarningIsVisible(true);
     }
-    setWarningIsVisible(true);
   }, [dialogId, dialogs, location]);
 
   // migration: add id to dialog when dialog doesn't have id
diff --git a/Composer/packages/client/src/shell/lgApi.ts b/Composer/packages/client/src/shell/lgApi.ts
index 0d0be9acb3..5013c87caf 100644
--- a/Composer/packages/client/src/shell/lgApi.ts
+++ b/Composer/packages/client/src/shell/lgApi.ts
@@ -99,7 +99,7 @@ function createLgApi(
     addLgTemplate: updateLgTemplate,
     getLgTemplates,
     updateLgTemplate,
-    debouncedUpdateLgTemplate: debounce(updateLgTemplate, 250, { leading: true, trailing: true }),
+    debouncedUpdateLgTemplate: debounce(updateLgTemplate, 250),
     removeLgTemplate,
     removeLgTemplates,
     copyLgTemplate,
diff --git a/Composer/packages/client/src/shell/luApi.ts b/Composer/packages/client/src/shell/luApi.ts
index ae4d185481..e94a6178c4 100644
--- a/Composer/packages/client/src/shell/luApi.ts
+++ b/Composer/packages/client/src/shell/luApi.ts
@@ -85,7 +85,7 @@ function createLuApi(
     getLuIntents,
     getLuIntent,
     updateLuIntent,
-    debouncedUpdateLuIntent: debounce(updateLuIntent, 250, { leading: true, trailing: true }),
+    debouncedUpdateLuIntent: debounce(updateLuIntent, 250),
     renameLuIntent,
     removeLuIntent,
   };

From d96bbaae80c05f06850b35effb94c76de4a4ae7f Mon Sep 17 00:00:00 2001
From: leilzh <leilzh@microsoft.com>
Date: Fri, 8 Jan 2021 09:29:45 +0800
Subject: [PATCH 2/2] make the useEffect more efficient

---
 .../client/src/components/ProjectTree/ProjectTree.tsx       | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 78f1610aa6..7c19757d0c 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -239,10 +239,8 @@ export const ProjectTree: React.FC<Props> = ({
   }));
 
   useEffect(() => {
-    if (!isEqual(selectedLink, defaultSelected)) {
-      setSelectedLink(defaultSelected);
-    }
-  }, [defaultSelected]);
+    setSelectedLink(defaultSelected);
+  }, [defaultSelected?.projectId, defaultSelected?.skillId, defaultSelected?.dialogId, defaultSelected?.trigger]);
 
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector);
   const botProjectSpace = useRecoilValue(botProjectSpaceSelector);