Minimize rerendering

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>
   );
-};
+});