perf: avoid multi re-rendering when switch the project tree item (step 2)

Composer/packages/client/src/components/AppComponents/MainContainer.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
+import { Router } from '@reach/router';
 
 import { NotificationContainer } from '../Notifications/NotificationContainer';
 
@@ -17,7 +18,9 @@ const main = css`
 export const MainContainer = () => {
   return (
     <div css={main}>
-      <SideBar />
+      <Router primary={false}>
+        <SideBar path="*" />
+      </Router>
       <RightPanel />
       <Assistant />
       <NotificationContainer />

Composer/packages/client/src/components/AppComponents/SideBar.tsx

@@ -9,6 +9,7 @@ import formatMessage from 'format-message';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
+import { RouteComponentProps } from '@reach/router';
 
 import { resolveToBasePath } from '../../utils/fileUtil';
 import { BASEPATH } from '../../constants';
@@ -64,7 +65,7 @@ const divider = (isExpand: boolean) => css`
 
 // -------------------- SideBar -------------------- //
 
-export const SideBar = () => {
+export const SideBar: React.FC<RouteComponentProps> = () => {
   const [sideBarExpand, setSideBarExpand] = useState(false);
   const { topLinks, bottomLinks } = useLinks();
 

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

@@ -16,15 +16,17 @@ import {
   dispatcherState,
   rootBotProjectIdSelector,
   currentDialogState,
+  designPageLocationState,
 } from '../../recoilModel';
 import { undoFunctionState } from '../../recoilModel/undo/history';
 import { undoStatusSelectorFamily } from '../../recoilModel/selectors/undo';
 import { DiagnosticsHeader } from '../../components/DiagnosticsHeader';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
-type CommandBarProps = { dialogId?: string; projectId: string };
+type CommandBarProps = { projectId: string };
 
-const CommandBar: React.FC<CommandBarProps> = ({ dialogId, projectId }) => {
+const CommandBar: React.FC<CommandBarProps> = React.memo(({ projectId }) => {
+  const { dialogId } = useRecoilValue(designPageLocationState(projectId));
   const currentDialog = useRecoilValue(currentDialogState({ dialogId, projectId }));
   const { undo, redo, clearUndo } = useRecoilValue(undoFunctionState(projectId));
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? projectId;
@@ -185,6 +187,6 @@ const CommandBar: React.FC<CommandBarProps> = ({ dialogId, projectId }) => {
       <Toolbar toolbarItems={toolbarItems} />
     </div>
   );
-};
+});
 
 export default CommandBar;

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

@@ -22,8 +22,9 @@ import Modals from './Modals';
 const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string; skillId?: string }>> = (
   props
 ) => {
-  const { dialogId, projectId = '', skillId, location } = props;
-  useEmptyPropsHandler(projectId, location, skillId, dialogId);
+  const { projectId = '', skillId, location } = props;
+
+  useEmptyPropsHandler(projectId, location, skillId, props.dialogId);
   const { setPageElementState } = useRecoilValue(dispatcherState);
 
   const onMeasuredSizesChanged = (sizes: SplitMeasuredSizes) => {
@@ -43,9 +44,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
         splitterSize="5px"
         onMeasuredSizesChanged={onMeasuredSizesChanged}
       >
-        <SideBar dialogId={dialogId ?? ''} projectId={activeBot} />
+        <SideBar projectId={activeBot} />
         <div css={contentWrapper} role="main">
-          <CommandBar dialogId={dialogId} projectId={activeBot} />
+          <CommandBar projectId={activeBot} />
           <Conversation css={editorContainer}>
             <div css={editorWrapper}>
               <Split
@@ -55,7 +56,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                 minSecondarySize="350px"
                 renderSplitter={renderThinSplitter}
               >
-                <VisualPanel dialogId={dialogId} projectId={activeBot} />
+                <VisualPanel projectId={activeBot} />
                 <PropertyPanel isSkill={activeBot !== projectId} projectId={activeBot} />
               </Split>
             </div>

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

@@ -26,7 +26,7 @@ type PropertyViewProps = {
   isSkill: boolean;
 };
 
-const PropertyPanel: React.FC<PropertyViewProps> = ({ projectId = '', isSkill = false }) => {
+const PropertyPanel: React.FC<PropertyViewProps> = React.memo(({ projectId = '', isSkill = false }) => {
   const schemas = useRecoilValue(schemasState(projectId));
   const focusPath = useRecoilValue(focusPathState(projectId));
   const undoVersion = useRecoilValue(undoVersionState(projectId));
@@ -58,6 +58,6 @@ const PropertyPanel: React.FC<PropertyViewProps> = ({ projectId = '', isSkill =
       )}
     </EditorExtension>
   );
-};
+});
 
 export default PropertyPanel;

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

@@ -65,17 +65,17 @@ const parseTriggerId = (triggerId: string | undefined): number | undefined => {
   return parseInt(indexString);
 };
 
-type SideBarProps = { dialogId: string; projectId: string };
+type SideBarProps = { projectId: string };
 
-const SideBar: React.FC<SideBarProps> = ({ dialogId, projectId }) => {
+const SideBar: React.FC<SideBarProps> = React.memo(({ projectId }) => {
+  const { dialogId, selected: encodedSelected } = useRecoilValue(designPageLocationState(projectId));
   const currentDialog = useRecoilValue(currentDialogState({ dialogId, projectId }));
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const projectDialogsMap = useRecoilValue(projectDialogsMapSelector);
   const { startSingleBot, stopSingleBot } = useBotOperations();
   const undoFunction = useRecoilValue(undoFunctionState(projectId));
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector);
   const { commitChanges } = undoFunction;
-  const designPageLocation = useRecoilValue(designPageLocationState(projectId));
 
   const {
     removeDialog,
@@ -93,7 +93,7 @@ const SideBar: React.FC<SideBarProps> = ({ dialogId, projectId }) => {
   const skillUsedInBotsMap = useRecoilValue(skillUsedInBotsSelector);
   const selected = decodeDesignerPathToArrayPath(
     dialogs.find((x) => x.id === dialogId)?.content,
-    designPageLocation.selected || ''
+    encodedSelected || ''
   );
 
   const setTriggerModalInfo = useSetRecoilState(triggerModalInfoState);
@@ -287,6 +287,6 @@ const SideBar: React.FC<SideBarProps> = ({ dialogId, projectId }) => {
       />
     </React.Fragment>
   );
-};
+});
 
 export default SideBar;

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

@@ -10,7 +10,7 @@ import get from 'lodash/get';
 import VisualDesigner from '@bfc/adaptive-flow';
 import { useRecoilValue } from 'recoil';
 import { useFormConfig, useShellApi } from '@bfc/extension-client';
-import cloneDeep from 'lodash/cloneDeep';
+import clone from 'lodash/clone';
 
 import grayComposerIcon from '../../images/grayComposerIcon.svg';
 import { dispatcherState, dialogsSelectorFamily, schemasState, designPageLocationState } from '../../recoilModel';
@@ -77,20 +77,18 @@ const VisualEditor: React.FC<VisualEditorProps> = (props) => {
   const formConfig = useFormConfig();
   const overridedSDKSchema = useMemo(() => {
     if (!dialogId) return {};
-
-    const sdkSchema = cloneDeep(schemas.sdk?.content ?? {});
-    const sdkDefinitions = sdkSchema.definitions;
-
+    const sdkSchema = schemas.sdk?.content ?? {};
+    const sdkDefinitions = clone(sdkSchema.definitions) ?? {};
     // Override the sdk.schema 'title' field with form ui option 'label' field
     // to make sure the title is consistent with Form Editor.
     Object.entries(formConfig).forEach(([$kind, formOptions]) => {
-      if (formOptions && sdkDefinitions[$kind]) {
-        sdkDefinitions[$kind].title = formOptions?.label;
+      const sdkOptions = sdkDefinitions[$kind];
+      if (formOptions && sdkOptions) {
+        sdkDefinitions[$kind] = { ...sdkOptions, title: formOptions.label };
       }
     });
-    return sdkSchema;
+    return { ...sdkSchema, definitions: sdkDefinitions };
   }, [formConfig, schemas, dialogId]);
-
   useEffect(() => {
     const dialog = dialogs.find((d) => d.id === dialogId);
     const visible = dialog ? get(dialog, 'triggers', []).length === 0 : false;

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

@@ -29,19 +29,18 @@ import VisualEditorWrapper from './VisualEditorWrapper';
 
 type VisualPanelProps = {
   projectId: string;
-  dialogId?: string;
 };
 
-const VisualPanel: React.FC<VisualPanelProps> = ({ projectId, dialogId }) => {
+const VisualPanel: React.FC<VisualPanelProps> = React.memo(({ projectId }) => {
+  const { dialogId, selected: encodedSelected } = useRecoilValue(designPageLocationState(projectId));
   const userSettings = useRecoilValue(userSettingsState);
   const currentDialog = useRecoilValue(currentDialogState({ dialogId, projectId }));
   const schemas = useRecoilValue(schemasState(projectId));
   const { isRemote: isRemoteSkill } = useRecoilValue(projectMetaDataState(projectId));
-  const designPageLocation = useRecoilValue(designPageLocationState(projectId));
 
   const { updateDialog, navTo } = useRecoilValue(dispatcherState);
 
-  const selected = decodeDesignerPathToArrayPath(currentDialog?.content, designPageLocation.selected || '');
+  const selected = decodeDesignerPathToArrayPath(currentDialog?.content, encodedSelected || '');
 
   const [dialogJsonVisible, setDialogJsonVisibility] = useState(false);
   const [warningIsVisible, setWarningIsVisible] = useState(true);
@@ -50,7 +49,7 @@ const VisualPanel: React.FC<VisualPanelProps> = ({ projectId, dialogId }) => {
     if (!warningIsVisible) {
       setWarningIsVisible(true);
     }
-  }, [dialogId, designPageLocation]);
+  }, [dialogId, encodedSelected]);
 
   const pluginConfig: PluginConfig = useMemo(() => {
     const sdkUISchema = schemas?.ui?.content ?? {};
@@ -100,6 +99,6 @@ const VisualPanel: React.FC<VisualPanelProps> = ({ projectId, dialogId }) => {
       )}
     </div>
   );
-};
+});
 
 export default VisualPanel;