Merge pull request #1147 from lowcoder-org/minimize-rerendering

Minimize rerendering

Author: FalkWolsky

client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx

@@ -31,7 +31,7 @@ import { SHARE_TITLE } from "../../constants/apiConstants";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { default as Divider } from "antd/es/divider";
 
-export const AppPermissionDialog = (props: {
+export const AppPermissionDialog = React.memo((props: {
   applicationId: string;
   visible: boolean;
   onVisibleChange: (visible: boolean) => void;
@@ -148,7 +148,7 @@ export const AppPermissionDialog = (props: {
       }
     />
   );
-};
+});
 
 const InviteInputBtn = styled.div`
   display: flex;

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -24,7 +24,7 @@ import {
   DEFAULT_GRID_COLUMNS,
   DEFAULT_ROW_HEIGHT,
 } from "layout/calculateUtils";
-import _ from "lodash";
+import _, { isEqual } from "lodash";
 import {
   ActionExtraInfo,
   changeChildAction,
@@ -313,7 +313,7 @@ const ItemWrapper = styled.div<{ $disableInteract?: boolean }>`
   pointer-events: ${(props) => (props.$disableInteract ? "none" : "unset")};
 `;
 
-const GridItemWrapper = React.forwardRef(
+const GridItemWrapper = React.memo(React.forwardRef(
   (
     props: React.PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -326,11 +326,11 @@ const GridItemWrapper = React.forwardRef(
       </ItemWrapper>
     );
   }
-);
+));
 
 type GirdItemViewRecord = Record<string, GridItem>;
 
-export function InnerGrid(props: ViewPropsWithSelect) {
+export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   const {
     positionParams,
     rowCount = Infinity,
@@ -348,11 +348,13 @@ export function InnerGrid(props: ViewPropsWithSelect) {
 
   // Falk: TODO: Here we can define the inner grid columns dynamically
   //Added By Aqib Mirza
-  const defaultGrid =
-    horizontalGridCells ||
+  const defaultGrid = useMemo(() => {
+    return horizontalGridCells ||
     currentTheme?.gridColumns ||
     defaultTheme?.gridColumns ||
     "12";
+  }, [horizontalGridCells, currentTheme?.gridColumns, defaultTheme?.gridColumns]);
+
   /////////////////////
   const isDroppable =
     useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;
@@ -385,7 +387,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
 
   const canAddSelect = useMemo(
     () => _.size(containerSelectNames) === _.size(editorState.selectedCompNames),
-    [containerSelectNames, editorState]
+    [containerSelectNames, editorState.selectedCompNames]
   );
 
   const dispatchPositionParamsTimerRef = useRef(0);
@@ -432,16 +434,21 @@ export function InnerGrid(props: ViewPropsWithSelect) {
       onPositionParamsChange,
       onRowCountChange,
       positionParams,
-      props,
+      props.dispatch,
+      props.containerPadding,
     ]
   );
   const setSelectedNames = useCallback(
     (names: Set<string>) => {
       editorState.setSelectedCompNames(names);
     },
-    [editorState]
+    [editorState.setSelectedCompNames]
   );
-  const { width, ref } = useResizeDetector({ onResize, handleHeight: isRowCountLocked });
+
+  const { width, ref } = useResizeDetector({
+    onResize,
+    handleHeight: isRowCountLocked,
+  });
 
   const itemViewRef = useRef<GirdItemViewRecord>({});
   const itemViews = useMemo(() => {
@@ -464,9 +471,10 @@ export function InnerGrid(props: ViewPropsWithSelect) {
   const clickItem = useCallback(
     (
       e: React.MouseEvent<HTMLDivElement,
-      globalThis.MouseEvent>, name: string
+      globalThis.MouseEvent>,
+      name: string,
     ) => selectItem(e, name, canAddSelect, containerSelectNames, setSelectedNames),
-    [canAddSelect, containerSelectNames, setSelectedNames]
+    [selectItem, canAddSelect, containerSelectNames, setSelectedNames]
   );
 
   useEffect(() => {
@@ -555,7 +563,9 @@ export function InnerGrid(props: ViewPropsWithSelect) {
       {itemViews}
     </ReactGridLayout>
   );
-}
+}, (prevProps, newProps) => {
+  return isEqual(prevProps, newProps);
+});
 
 function selectItem(
   e: MouseEvent<HTMLDivElement>,

client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

@@ -1,6 +1,6 @@
 import { EditorContext } from "comps/editorState";
 import { EditorContainer } from "pages/common/styledComponent";
-import { Profiler, useContext, useRef, useState } from "react";
+import React, { Profiler, useContext, useRef, useState } from "react";
 import styled from "styled-components";
 import { profilerCallback } from "util/cacheUtils";
 import {
@@ -20,6 +20,7 @@ import { CanvasContainerID } from "constants/domLocators";
 import { CNRootContainer } from "constants/styleSelectors";
 import { ScrollBar } from "lowcoder-design";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { isEqual } from "lodash";
 
 // min-height: 100vh;
 
@@ -72,7 +73,7 @@ function getDragSelectedNames(
 
 const EmptySet = new Set<string>();
 
-export function CanvasView(props: ContainerBaseProps) {
+export const CanvasView = React.memo((props: ContainerBaseProps) => {
   const editorState = useContext(EditorContext);
   const [dragSelectedComps, setDragSelectedComp] = useState(EmptySet);
   const scrollContainerRef = useRef(null);
@@ -166,4 +167,6 @@ export function CanvasView(props: ContainerBaseProps) {
       </EditorContainer>
     </CanvasContainer>
   );
-}
+}, (prevProps, newProps) => {
+  return isEqual(prevProps, newProps);
+});

client/packages/lowcoder/src/comps/comps/gridLayoutComp/dragSelector.tsx

@@ -38,7 +38,7 @@ const InitialState = {
   startPoint: undefined,
 };
 
-export class DragSelector extends React.Component<SectionProps, SectionState> {
+class DragSelectorComp extends React.Component<SectionProps, SectionState> {
   private readonly selectAreaRef: React.RefObject<HTMLDivElement>;
 
   constructor(props: SectionProps) {
@@ -178,3 +178,5 @@ export class DragSelector extends React.Component<SectionProps, SectionState> {
     };
   }
 }
+
+export const DragSelector = React.memo(DragSelectorComp);

client/packages/lowcoder/src/comps/comps/rootComp.tsx

@@ -32,6 +32,8 @@ import {
 import RefTreeComp from "./refTreeComp";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { useUserViewMode } from "util/hooks";
+import React from "react";
+import { isEqual } from "lodash";
 
 const EditorView = lazy(
   () => import("pages/editor/editorView"),
@@ -55,7 +57,7 @@ const childrenMap = {
   preload: PreloadComp,
 };
 
-function RootView(props: RootViewProps) {
+const RootView = React.memo((props: RootViewProps) => {
   const previewTheme = useContext(ThemeContext);
   const { comp, isModuleRoot, ...divProps } = props;
   const [editorState, setEditorState] = useState<EditorState>();
@@ -143,7 +145,9 @@ function RootView(props: RootViewProps) {
       </PropertySectionContext.Provider>
     </div>
   );
-}
+}, (prevProps, nextProps) => {
+  return isEqual(prevProps, nextProps);
+});
 
 /**
  * Root Comp

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -44,10 +44,10 @@ export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
     version: InstanceType<typeof StringControl>;
   };
 
-export function HidableView(props: {
+export const HidableView = React.memo((props: {
   children: JSX.Element | React.ReactNode;
   hidden: boolean;
-}) {
+}) => {
   const { readOnly } = useContext(ExternalEditorContext);
   if (readOnly) {
     return <>{props.children}</>;
@@ -64,15 +64,15 @@ export function HidableView(props: {
       </>
     );
   }
-}
+})
 
-export function ExtendedPropertyView<
+export const ExtendedPropertyView = React.memo(<
   ChildrenCompMap extends Record<string, Comp<unknown>>,
 >(props: {
   children: JSX.Element | React.ReactNode,
   childrenMap: NewChildren<ChildrenCompMap>
 }
-) {
+) => {
   const [compVersions, setCompVersions] = useState(['latest']);
   const [compName, setCompName] = useState('');
   const editorState = useContext(EditorContext);
@@ -129,7 +129,7 @@ export function ExtendedPropertyView<
       )}
     </>
   );
-}
+});
 
 export function uiChildren<
   ChildrenCompMap extends Record<string, Comp<unknown>>,
@@ -275,11 +275,11 @@ export const DisabledContext = React.createContext<boolean>(false);
 /**
  * Guaranteed to be in a react component, so that react hooks can be used internally
  */
-function UIView(props: {
+const UIView = React.memo((props: {
   innerRef: React.RefObject<HTMLDivElement>;
   comp: any;
   viewFn: any;
-}) {
+}) => {
   const comp = props.comp;
   const childrenProps = childrenToProps(comp.children);
   const childrenJsonProps = comp.toJsonValue();
@@ -397,13 +397,12 @@ function UIView(props: {
         width: '100%',
         height: '100%',
         margin: '0px',
-        padding:getPadding()
-          
+        padding: getPadding()
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>
         {props.viewFn(childrenProps, comp.dispatch)}
       </HidableView>
     </div>
   );
-}
+});

client/packages/lowcoder/src/index.sdk.ts

@@ -6,9 +6,13 @@ import * as styledNameExports from "styled-components";
 import styledDefault from "styled-components";
 export * as styledm from "styled-components";
 export * from "comps/comps/containerBase/containerCompBuilder";
+export * from "comps/comps/containerBase/iContainer";
+export * from "comps/comps/containerBase/utils";
+export * from "comps/comps/containerBase/simpleContainerComp";
 export * from "comps/utils/backgroundColorContext";
 export { getData } from "comps/comps/listViewComp/listViewUtils";
 export { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
+export type { ContainerBaseProps } from "comps/comps/containerComp/containerView";
 
 export { Layers } from "constants/Layers";
 export * from "comps/controls/eventHandlerControl";
@@ -97,6 +101,7 @@ export * from "comps/controls/simpleStringControl";
 export * from "comps/controls/stringSimpleControl";
 export * from "comps/controls/styleControl";
 export * from "comps/controls/styleControlConstants";
+export * from "comps/controls/slotControl";
 
 // generators
 export * from "comps/generators/changeDataType";
@@ -114,6 +119,7 @@ export * from "comps/generators/withExposing";
 export * from "comps/generators/withIsLoading";
 export * from "comps/generators/withMethodExposing";
 export * from "comps/generators/withType";
+export * from "comps/generators/controlCompBuilder";
 
 export * from "appView/bootstrapAt";
 export * from "appView/LowcoderAppView";

client/packages/lowcoder/src/layout/compSelectionWrapper.tsx

@@ -231,7 +231,7 @@ const HiddenIcon = styled(CloseEyeIcon)`
   }
 `;
 
-export const CompSelectionWrapper = (props: {
+export const CompSelectionWrapper = React.memo((props: {
   id?: string;
   compType: UICompType;
   className?: string;
@@ -376,4 +376,4 @@ export const CompSelectionWrapper = (props: {
       </SelectableDiv>
     </div>
   );
-};
+});

client/packages/lowcoder/src/layout/gridItem.tsx

@@ -471,16 +471,16 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
             isDraggable={isDraggable && isItemDraggable(item)}
             isResizable={isResizable && isItemResizable(item)}
             isSelectable={selectable}
-            transformScale={transformScale}
+            transformScale={transformScale || 1}
             w={item.w}
             h={extraItem?.hidden && !extraItem?.isSelected ? 0 : item.h}
             x={item.x}
             y={item.y}
             i={item.i}
-            minH={item.minH}
-            minW={item.minW}
-            maxH={item.maxH}
-            maxW={item.maxW}
+            minH={item.minH || 1}
+            minW={item.minW || 1}
+            maxH={item.maxH || Infinity}
+            maxW={item.maxW || Infinity}
             placeholder={item.placeholder}
             layoutHide={item.hide}
             static={item.static}
@@ -496,6 +496,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
               bottom: (showName?.bottom ?? 0) + (this.ref.current?.scrollHeight ?? 0),
             }}
             zIndex={zIndex}
+            className=""
           >
             {child}
           </GridItem>
@@ -1096,7 +1097,8 @@ const LayoutContainer = styled.div<{
   }`}
 `;
 
-export const ReactGridLayout = GridLayout;
+// export const ReactGridLayout = React.memo(GridLayout);
+export const ReactGridLayout = React.memo(GridLayout);
 
 function moveOrResize(
   e: React.KeyboardEvent,

client/packages/lowcoder/src/layout/gridLayout.tsx

@@ -25,7 +25,7 @@ import {
 } from "lowcoder-design";
 import { trans } from "i18n";
 import dayjs from "dayjs";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
   publishApplication,
@@ -453,67 +453,74 @@ export default function Header(props: HeaderProps) {
     </>
   );
 
-  const headerEnd = showAppSnapshot ? (
-    <HeaderProfile user={user} />
-  ) : (
-    <>
-      {applicationId && (
-        <AppPermissionDialog
-          applicationId={applicationId}
-          visible={permissionDialogVisible}
-          onVisibleChange={(visible) =>
-            !visible && setPermissionDialogVisible(false)
-          }
-        />
-      )}
-      {canManageApp(user, application) && (
-        <GrayBtn onClick={() => setPermissionDialogVisible(true)}>
-          {SHARE_TITLE}
-        </GrayBtn>
-      )}
-      <PreviewBtn buttonType="primary" onClick={() => preview(applicationId)}>
-        {trans("header.preview")}
-      </PreviewBtn>
-
-      <Dropdown
-        className="cypress-header-dropdown"
-        placement="bottomRight"
-        trigger={["click"]}
-        dropdownRender={() => (
-          <DropdownMenuStyled
-            style={{ minWidth: "110px", borderRadius: "4px" }}
-            onClick={(e) => {
-              if (e.key === "deploy") {
-                dispatch(publishApplication({ applicationId }));
-              } else if (e.key === "snapshot") {
-                dispatch(setShowAppSnapshot(true));
-              }
-            }}
-            items={[
-              {
-                key: "deploy",
-                label: (
-                  <CommonTextLabel>{trans("header.deploy")}</CommonTextLabel>
-                ),
-              },
-              {
-                key: "snapshot",
-                label: (
-                  <CommonTextLabel>{trans("header.snapshot")}</CommonTextLabel>
-                ),
-              },
-            ]}
+  const headerEnd = useMemo(() => {
+    return showAppSnapshot ? (
+      <HeaderProfile user={user} />
+    ) : (
+      <>
+        {applicationId && (
+          <AppPermissionDialog
+            applicationId={applicationId}
+            visible={permissionDialogVisible}
+            onVisibleChange={(visible) =>
+              !visible && setPermissionDialogVisible(false)
+            }
           />
         )}
-      >
-        <PackUpBtn buttonType="primary">
-          <PackUpIcon />
-        </PackUpBtn>
-      </Dropdown>
+        {canManageApp(user, application) && (
+          <GrayBtn onClick={() => setPermissionDialogVisible(true)}>
+            {SHARE_TITLE}
+          </GrayBtn>
+        )}
+        <PreviewBtn buttonType="primary" onClick={() => preview(applicationId)}>
+          {trans("header.preview")}
+        </PreviewBtn>
+
+        <Dropdown
+          className="cypress-header-dropdown"
+          placement="bottomRight"
+          trigger={["click"]}
+          dropdownRender={() => (
+            <DropdownMenuStyled
+              style={{ minWidth: "110px", borderRadius: "4px" }}
+              onClick={(e) => {
+                if (e.key === "deploy") {
+                  dispatch(publishApplication({ applicationId }));
+                } else if (e.key === "snapshot") {
+                  dispatch(setShowAppSnapshot(true));
+                }
+              }}
+              items={[
+                {
+                  key: "deploy",
+                  label: (
+                    <CommonTextLabel>{trans("header.deploy")}</CommonTextLabel>
+                  ),
+                },
+                {
+                  key: "snapshot",
+                  label: (
+                    <CommonTextLabel>{trans("header.snapshot")}</CommonTextLabel>
+                  ),
+                },
+              ]}
+            />
+          )}
+        >
+          <PackUpBtn buttonType="primary">
+            <PackUpIcon />
+          </PackUpBtn>
+        </Dropdown>
 
-      <HeaderProfile user={user} />
-    </>
-  );
+        <HeaderProfile user={user} />
+      </>
+    );
+  }, [
+    user,
+    showAppSnapshot,
+    applicationId,
+    permissionDialogVisible,
+  ]);
 
   return (
     <LayoutHeader

client/packages/lowcoder/src/pages/common/header.tsx

@@ -181,7 +181,7 @@ const introVideoUrl = trans("docUrls.introVideo");
 const issueUrl = trans("lowcoderUrl.createIssue");
 const discordUrl = trans("lowcoderUrl.discord");
 
-export function HelpDropdown(props: HelpDropdownProps) {
+function HelpDropdownComp(props: HelpDropdownProps) {
   const [showHelp, setShowHelp] = useState(true);
   const [version, setVersion] = useState("");
   const dispatch = useDispatch();
@@ -446,3 +446,5 @@ export function HelpDropdown(props: HelpDropdownProps) {
     </HelpWrapper>
   </>);
 }
+
+export const HelpDropdown = React.memo(HelpDropdownComp);

client/packages/lowcoder/src/pages/common/help.tsx

@@ -20,6 +20,7 @@ import { getBrandingConfig } from "../../redux/selectors/configSelectors";
 import { HeaderStartDropdown } from "./headerStartDropdown";
 import { useParams } from "react-router";
 import { AppPathParams } from "constants/applicationConstants";
+import React from "react";
 
 const HeaderFont = styled.div<{ $bgColor: string }>`
   font-weight: 500;
@@ -127,7 +128,7 @@ export function HeaderProfile(props: { user: User }) {
   );
 }
 
-export const PreviewHeader = () => {
+const PreviewHeaderComp = () => {
   const params = useParams<AppPathParams>();
   const user = useSelector(getUser);
   const application = useSelector(currentApplication);
@@ -203,3 +204,5 @@ export const PreviewHeader = () => {
     />
   );
 };
+
+export const PreviewHeader = React.memo(PreviewHeaderComp);

client/packages/lowcoder/src/pages/common/previewHeader.tsx

@@ -24,6 +24,8 @@ import { useUserViewMode } from "../../util/hooks";
 import { QueryApi } from "api/queryApi";
 import { RootCompInstanceType } from "./useRootCompInstance";
 import { getCurrentUser } from "redux/selectors/usersSelectors";
+import React from "react";
+import { isEqual } from "lodash";
 
 /**
  * FIXME: optimize the logic of saving comps
@@ -77,7 +79,7 @@ interface AppEditorInternalViewProps {
   compInstance: RootCompInstanceType;
 }
 
-export function AppEditorInternalView(props: AppEditorInternalViewProps) {
+export const AppEditorInternalView = React.memo((props: AppEditorInternalViewProps) => {
   const isUserViewMode = useUserViewMode();
   const extraExternalEditorState = useSelector(getExternalEditorState);
   const dispatch = useDispatch();
@@ -125,4 +127,6 @@ export function AppEditorInternalView(props: AppEditorInternalViewProps) {
       </ExternalEditorContext.Provider>
     </ConfigProvider>
   );
-}
+}, (prevProps, nextProps) => {
+  return isEqual(prevProps, nextProps)
+});

client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx

@@ -113,7 +113,7 @@ function handleMouseDown(e: MouseEvent, editorState: EditorState, showLeftPanel:
   }
 }
 
-export function EditorGlobalHotKeys(props: GlobalProps) {
+export const EditorGlobalHotKeys = React.memo((props: GlobalProps) => {
   const editorState = useContext(EditorContext);
   const { history: editorHistory } = useContext(ExternalEditorContext);
   const { togglePanel, panelStatus, toggleShortcutList } = props;
@@ -155,7 +155,7 @@ export function EditorGlobalHotKeys(props: GlobalProps) {
       children={props.children}
     />
   );
-}
+})
 
 // local hotkeys
 function handleEditorKeyDown(e: React.KeyboardEvent, editorState: EditorState) {
@@ -186,7 +186,7 @@ function handleEditorKeyDown(e: React.KeyboardEvent, editorState: EditorState) {
   }
 }
 
-export function EditorHotKeys(props: Props) {
+export const EditorHotKeys = React.memo((props: Props) => {
   const editorState = useContext(EditorContext);
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent) => handleEditorKeyDown(e, editorState),
@@ -200,9 +200,9 @@ export function EditorHotKeys(props: Props) {
       children={props.children}
     />
   );
-}
+})
 
-export function CustomShortcutWrapper(props: { children: React.ReactNode }) {
+export const CustomShortcutWrapper = React.memo((props: { children: React.ReactNode }) => {
   const editorState = useContext(EditorContext);
   const handleCustomShortcut = useCallback(
     (e: KeyboardEvent) => {
@@ -215,4 +215,4 @@ export function CustomShortcutWrapper(props: { children: React.ReactNode }) {
       {props.children}
     </GlobalShortcutsWrapper>
   );
-}
+})

client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx

@@ -60,12 +60,12 @@ export default function EditorSkeletonView() {
   return (
     <>
       <Height100Div>
-        <Header
+        {/* <Header
           panelStatus={panelStatus}
           togglePanel={_.noop}
           editorModeStatus={editorModeStatus}
           toggleEditorModeStatus={_.noop}
-        />
+        /> */}
         <Body>
           <SiderStyled />
           {panelStatus.left && (

client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx

@@ -54,6 +54,7 @@ import {
 import { isAggregationApp } from "util/appUtils";
 import EditorSkeletonView from "./editorSkeletonView";
 import { getCommonSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
+import { isEqual } from "lodash";
 
 const LeftContent = lazy(
   () => import('./LeftContent')
@@ -577,4 +578,6 @@ function EditorView(props: EditorViewProps) {
   );
 }
 
-export default EditorView;
+export default React.memo(EditorView, (prevProps, newProps) => {
+  return isEqual(prevProps, newProps);
+});

client/packages/lowcoder/src/pages/editor/editorView.tsx

@@ -9,6 +9,7 @@ import { AttributeIcon } from "lowcoder-design";
 import { InsertIcon } from "lowcoder-design";
 import { trans } from "i18n";
 import { isAggregationApp } from "util/appUtils";
+import React from "react";
 
 type RightPanelProps = {
   onTabChange: (key: string) => void;
@@ -17,7 +18,7 @@ type RightPanelProps = {
   uiComp?: InstanceType<typeof UIComp>;
 };
 
-export default function RightPanel(props: RightPanelProps) {
+function RightPanel(props: RightPanelProps) {
   const { onTabChange, showPropertyPane, uiComp } = props;
   const uiCompType = uiComp && (uiComp.children.compType.getView() as UiLayoutType);
   const aggregationApp = uiCompType && isAggregationApp(uiCompType);
@@ -55,3 +56,5 @@ export default function RightPanel(props: RightPanelProps) {
     </RightPanelWrapper>
   );
 }
+
+export default React.memo(RightPanel);

client/packages/lowcoder/src/pages/editor/right/RightPanel.tsx

@@ -33,6 +33,7 @@ import { i18nObjs } from "../../i18n/index";
 import { DatasourceInfo, HttpConfig } from "api/datasourceApi";
 import { enObj } from "i18n/locales";
 import { QUICK_REST_API_ID } from "constants/datasourceConstants";
+import React from "react";
 
 const tourSteps: Step[] = [
   {
@@ -203,7 +204,7 @@ function addQuery(editorState: EditorState, datasourceInfos: DatasourceInfo[]) {
   editorState.setSelectedBottomRes(queryName, BottomResTypeEnum.Query);
 }
 
-export default function EditorTutorials() {
+function EditorTutorials() {
   const [run, setRun] = useState(false);
   const [stepIndex, setStepIndex] = useState(0);
   const editorState = useContext(EditorContext);
@@ -309,3 +310,5 @@ export default function EditorTutorials() {
     />
   );
 }
+
+export default React.memo(EditorTutorials);