reduce re-rendering by adding memoziation

Author: raheeliftikhar5

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

@@ -439,9 +439,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       isRowCountLocked,
       onPositionParamsChange,
       onRowCountChange,
-      positionParams,
+      JSON.stringify(positionParams),
+      JSON.stringify(props.containerPadding),
       props.dispatch,
-      props.containerPadding,
     ]
   );
   const setSelectedNames = useCallback(
@@ -454,6 +454,8 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   const { width, ref } = useResizeDetector({
     onResize,
     handleHeight: isRowCountLocked,
+    refreshMode: 'debounce',
+    refreshRate: 100,
   });
 
   const itemViewRef = useRef<GirdItemViewRecord>({});

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

@@ -136,7 +136,7 @@ type ColumnContainerProps = Omit<ContainerBaseProps, 'style'> & {
   style: ResponsiveLayoutColStyleType,
 }
 
-const ColumnContainer = (props: ColumnContainerProps) => {
+const ColumnContainer = React.memo((props: ColumnContainerProps) => {
   return (
     <InnerGrid
       {...props}
@@ -145,7 +145,7 @@ const ColumnContainer = (props: ColumnContainerProps) => {
       style={props.style}
     />
   );
-};
+});
 
 const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
   const screenInfo = useScreenInfo();

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

@@ -93,7 +93,6 @@ export function calcGridItemSizePx(
   const width = calcGridItemWHPx(w, colWidth, margin[0], false);
 
   const isTouchSBound = top ? isTouchBound(maxRows, rowHeight, h, top) : false;
-  // console.log('positionParams',positionParams);
   const height = calcGridItemWHPx(h, rowHeight, margin[1], isTouchSBound);
   return { width, height };
 }

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

@@ -11,14 +11,16 @@ import React, {
   MouseEventHandler,
   useCallback,
   useContext,
+  useMemo,
   useRef,
   useState,
 } from "react";
 import ReactResizeDetector, { useResizeDetector } from "react-resize-detector";
 import styled, { css } from "styled-components";
 import { EllipsisTextCss } from "lowcoder-design";
 import { draggingUtils } from "./draggingUtils";
-import { ResizeHandleAxis } from "./gridLayoutPropTypes";
+import type { ResizeHandleAxis } from "./gridLayoutPropTypes";
+import { isEqual } from "lodash";
 
 export type DragHandleName = "w" | "e" | "nw" | "ne" | "sw" | "se";
 type NamePos = "top" | "bottom" | "bottomInside";
@@ -273,7 +275,7 @@ export const CompSelectionWrapper = React.memo((props: {
       }
       setHover(true);
     },
-    [setHover]
+    [nameDivRef.current, setHover]
   );
   const onMouseOut = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
@@ -287,39 +289,57 @@ export const CompSelectionWrapper = React.memo((props: {
       }
       setHover(false);
     },
-    [setHover]
+    [nameDivRef.current, setHover]
   );
 
-  const selectableDivProps = props.isSelectable
-    ? {
-        onMouseOver,
-        onMouseOut,
-        onClick: props.onClick,
-        $hover: hover || undefined,
-        $showDashLine: editorState.showGridLines() || props.hidden,
-        $isSelected: props.isSelected,
-        $isHidden: props.hidden,
-      }
-    : {
-        $hover: undefined,
-        $showDashLine: false,
-        $isSelected: false,
-        $isHidden: false,
-      };
+  const selectableDivProps = useMemo(() => {
+    return props.isSelectable
+      ? {
+          onMouseOver,
+          onMouseOut,
+          onClick: props.onClick,
+          $hover: hover || undefined,
+          $showDashLine: editorState.showGridLines() || props.hidden,
+          $isSelected: props.isSelected,
+          $isHidden: props.hidden,
+        }
+      : {
+          $hover: undefined,
+          $showDashLine: false,
+          $isSelected: false,
+          $isHidden: false,
+        };
+  }, [
+    hover,
+    props.hidden,
+    props.isSelected,
+    props.isSelectable,
+  ]);  
+
+  const zIndex = useMemo(() => {
+    return props.isSelected
+      ? Layers.compSelected
+      : hover
+      ? Layers.compHover
+      : props.hidden
+      ? Layers.compHidden
+      : undefined;
+  }, [
+    hover,
+    props.hidden,
+    props.isSelected
+  ]);
 
-  const zIndex = props.isSelected
-    ? Layers.compSelected
-    : hover
-    ? Layers.compHover
-    : props.hidden
-    ? Layers.compHidden
-    : undefined;
+  const needResizeDetector = useMemo(() => {
+    return props.autoHeight && !props.placeholder;
+  }, [props.autoHeight, props.placeholder]);
 
-  const needResizeDetector = props.autoHeight && !props.placeholder;
   const { ref: wrapperRef } = useResizeDetector({
     onResize: props.onWrapperResize,
     handleHeight: needResizeDetector,
     handleWidth: false,
+    refreshMode: 'debounce',
+    refreshRate: 100,
   });
   // log.debug("CompSelectionWrapper. name: ", props.name, " zIndex: ", zIndex);
   const { nameConfig, resizeIconSize } = props;
@@ -369,8 +389,18 @@ export const CompSelectionWrapper = React.memo((props: {
         {!needResizeDetector && props.children}
         {needResizeDetector && (
           <ReactResizeDetector
+            skipOnMount={
+              props.compType === 'responsiveLayout'
+              || props.compType === 'columnLayout'
+              || props.compType === 'pageLayout'
+              || props.compType === 'splitLayout'
+              || props.compType === 'floatTextContainer'
+              || props.compType === 'tabbedContainer'
+              || props.compType === 'collapsibleContainer'
+              || props.compType === 'container'
+            }
             refreshMode="debounce"
-            refreshRate={250}
+            refreshRate={100}
             onResize={props.onInnerResize}
             observerOptions={{ box: "border-box" }}
           >
@@ -380,4 +410,4 @@ export const CompSelectionWrapper = React.memo((props: {
       </SelectableDiv>
     </div>
   );
-});
+}, (prev, next) => isEqual(prev, next));

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

@@ -104,6 +104,19 @@ const ResizableStyled = styled(Resizable)<{ $zIndex: number, isDroppable : boole
  */
 export const GridItem = React.memo((props: GridItemProps) => {
   const position = useMemo(() =>{
+    console.log('calculateGridItemPOistion', JSON.stringify({
+      name: props.name,
+      margin: props.margin,
+      containerPadding: props.containerPadding,
+      containerWidth: props.containerWidth,
+      cols: props.cols,
+      rowHeight: props.rowHeight,
+      maxRows: props.maxRows,
+      x: props.x,
+      y: props.y,
+      w: props.w,
+      h: props.h,
+    }));
     return calcGridItemPosition({
       margin: props.margin,
       containerPadding: props.containerPadding,
@@ -113,8 +126,8 @@ export const GridItem = React.memo((props: GridItemProps) => {
       maxRows: props.maxRows,
     }, props.x, props.y, props.w, props.h)},
     [
-      props.margin,
-      props.containerPadding,
+      JSON.stringify(props.margin),
+      JSON.stringify(props.containerPadding),
       props.containerWidth,
       props.cols,
       props.rowHeight,
@@ -123,7 +136,6 @@ export const GridItem = React.memo((props: GridItemProps) => {
       props.y,
       props.w,
       props.h,
-      calcGridItemPosition,
     ]
   );
 
@@ -230,8 +242,8 @@ export const GridItem = React.memo((props: GridItemProps) => {
       y: yy,
     });
   }, [
-    resizing,
-    dragging,
+    JSON.stringify(resizing),
+    JSON.stringify(dragging),
     props.cols,
     props.maxRows,
     props.x,
@@ -417,7 +429,7 @@ export const GridItem = React.memo((props: GridItemProps) => {
       itemHeightRef.current = height;
     }
     adjustWrapperHeight(width, height);
-  }, [itemHeightRef, adjustWrapperHeight]);
+  }, [itemHeightRef.current, adjustWrapperHeight]);
 
   /**
    * re-calculate the occupied gird-cells.
@@ -427,7 +439,7 @@ export const GridItem = React.memo((props: GridItemProps) => {
    */
   const onWrapperSizeChange = useCallback(() => {
     adjustWrapperHeight(undefined, itemHeightRef.current);
-  }, [itemHeightRef, adjustWrapperHeight]);
+  }, [itemHeightRef.current, adjustWrapperHeight]);
 
   const mixinChildWrapper = useCallback((child: React.ReactElement): React.ReactElement => {
     const {
@@ -535,6 +547,21 @@ export const GridItem = React.memo((props: GridItemProps) => {
 
   const pos = useMemo(calcPosition, [calcPosition]);
 
+  const transform = useMemo(() => {
+    return setTransform(
+      pos,
+      props.name,
+      props.autoHeight,
+      props.hidden,
+      Boolean(draggingUtils.isDragging())
+    )
+  }, [
+    JSON.stringify(pos),
+    props.name,
+    props.autoHeight,
+    props.hidden
+  ]);
+
   const render = useMemo(() => {
     let child = React.Children.only(children);
     // Create the child element. We clone the existing element but modify its className and style.
@@ -563,13 +590,7 @@ export const GridItem = React.memo((props: GridItemProps) => {
         cssTransforms: true,
       }),
       style: {
-        ...setTransform(
-          pos,
-          props.name,
-          props.autoHeight,
-          props.hidden,
-          Boolean(draggingUtils.isDragging())
-        ),
+        ...transform,
         opacity: layoutHide ? 0 : undefined,
         pointerEvents: layoutHide ? "none" : "auto",
       },
@@ -580,11 +601,12 @@ export const GridItem = React.memo((props: GridItemProps) => {
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
   }, [
-    pos,
+    JSON.stringify(transform),
+    JSON.stringify(pos),
     children,
     elementRef,
-    resizing,
-    dragging,
+    Boolean(resizing),
+    Boolean(dragging),
     isDraggable,
     layoutHide,
     zIndex,
@@ -593,8 +615,6 @@ export const GridItem = React.memo((props: GridItemProps) => {
     props.className,
     props.style,
     props.static,
-    props.autoHeight,
-    props.hidden,
     setTransform,
     mixinChildWrapper,
     mixinResizable,

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

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { colord } from "colord";
-import { UICompType } from "comps/uiCompRegistry";
+import type { UICompType } from "comps/uiCompRegistry";
 import { ModulePrimaryColor, PrimaryColor } from "constants/style";
-import _ from "lodash";
+import _, { isEqual } from "lodash";
 import log from "loglevel";
 import React, { DragEvent, DragEventHandler, MouseEventHandler, ReactElement } from "react";
 import ReactResizeDetector from "react-resize-detector";
@@ -21,7 +21,7 @@ import {
 import { draggingUtils } from "./draggingUtils";
 import { FlyOverInfo, FlyStartInfo } from "./flyInfo";
 import { GridItem } from "./gridItem";
-import { GridLayoutProps } from "./gridLayoutPropTypes";
+import type { GridLayoutProps } from "./gridLayoutPropTypes";
 import { GridLines } from "./gridLines";
 import { changeItemOp, deleteItemOp, LayoutOp, renameItemOp } from "./layoutOp";
 import { getUILayout, LayoutOps, layoutOpUtils } from "./layoutOpUtils";
@@ -1102,7 +1102,7 @@ const LayoutContainer = styled.div<{
   }`}
 `;
 
-export const ReactGridLayout = React.memo(GridLayout);
+export const ReactGridLayout = React.memo(GridLayout, (prev, next) => isEqual(prev, next));
 
 function moveOrResize(
   e: React.KeyboardEvent,

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import { calcGridColWidth, PositionParams } from "./calculateUtils";
 import { Position, setTransform } from "./utils";
+import React from "react";
 
 interface GridLineProps {
   position: Position;
@@ -19,10 +20,10 @@ function setBackgroundProps(positionParams: PositionParams, lineColor: string):
   };
 }
 
-export function GridLines(props: GridLineProps) {
+export const GridLines = React.memo((props: GridLineProps) => {
   const style = {
     ...setTransform(props.position),
     ...setBackgroundProps(props.positionParams, props.lineColor),
   };
   return <div style={style} />;
-}
+})

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

@@ -92,6 +92,7 @@ export namespace layoutOpUtils {
 }
 
 function reduce(layout: Layout, op: LayoutOp, stickyItemMap?: Record<string, Set<string>>): Layout {
+  // console.log(op.type);
   let newLayout = layout;
   switch (op.type) {
     case LayoutOpTypes.CHANGE_ITEM: {
@@ -146,6 +147,7 @@ export let getUILayout = (
   ops: LayoutOps | undefined,
   setHiddenCompHeightZero: boolean = false
 ): Layout => {
+  // console.log('layout->before', changedHs, layout);
   // log.log("getUILayout. layout: ", layout, " extraLayout: ", extraLayout, " changedHs: ", changedHs, " ops: ", ops);
   const stickyItemMap = getStickyItemMap(layout);
   const hiddenItemHeight = _.fromPairs(
@@ -163,7 +165,9 @@ export let getUILayout = (
   realOps.forEach((op) => {
     layout = reduce(layout, op, stickyItemMap);
   });
+  // console.log('layout->after', layout);
   layout = cascade(layout);
+  // console.log('layout->after->2', layout);
   if (!setHiddenCompHeightZero) {
     const recoverHiddenOps = _.toPairs(hiddenItemHeight).map(([i, h]) => changeItemOp(i, { h }));
     recoverHiddenOps.forEach((op) => {

client/packages/lowcoder/src/layout/utils.ts

@@ -207,6 +207,7 @@ export function setTransform(
   hidden?: boolean,
   isDragging?: boolean,
 ): Record<string, any> {
+  console.log(name, {top, left, width, height })
   // Replace unitless items with px
   const translate = `translate(${left}px,${top}px)`;
   function containsChart(str:string) {