added memoization on table comp

Author: raheeliftikhar5

client/packages/lowcoder/src/components/table/EditableCell.tsx

@@ -84,7 +84,7 @@ interface EditableCellProps<T> extends CellProps {
   changeValue?: T | null;
 }
 
-export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
+function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
   const {
     dispatch,
     normalView,
@@ -157,9 +157,10 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
       <ColumnTypeView
         textOverflow={props.textOverflow}
       >
-        {status === "toSave" && !isEditing && <EditableChip />}
+        {status === "toSave" && !isEditing && <EditableChip key={`editable-chip`}/>}
         <CellWrapper tooltipTitle={props.cellTooltip}>
           <div
+            key={`normal-view`}
             tabIndex={editable ? 0 : -1 }
             onFocus={enterEditFn}
           >
@@ -170,6 +171,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
         {editable && (
           <CellWrapper tooltipTitle={props.cellTooltip}>
             <div
+              key={`editable-view`}
               style={{
                 position: 'absolute',
                 top: 0,
@@ -186,3 +188,5 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
       </ColumnTypeView>
   );
 }
+
+export const EditableCell = React.memo(EditableCellComp) as typeof EditableCellComp;

client/packages/lowcoder/src/components/table/columnTypeView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 const ColumnTypeViewWrapper = styled.div<{
@@ -73,13 +73,13 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
   return false;
 }
 
-export default function ColumnTypeView(props: {
+function ColumnTypeView(props: {
   children: React.ReactNode,
   textOverflow?: boolean,
 }) {
 
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const hoverViewRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const hoverViewRef = useRef<HTMLDivElement | null>(null);
   const [isHover, setIsHover] = useState(false);
   const [hasOverflow, setHasOverflow] = useState(false);
   const [adjustedPosition, setAdjustedPosition] = useState<{
@@ -90,13 +90,12 @@ export default function ColumnTypeView(props: {
     width?: number;
   }>({ done: false });
   const [delayHandler, setDelayHandler] = useState<any>();
-  const delayMouseEnter = useMemo(() => {
-    return () =>
-      setDelayHandler(
-        setTimeout(() => {
-          setIsHover(true);
-        }, 300)
-      );
+  const delayMouseEnter = useCallback(() => {
+    setDelayHandler(
+      setTimeout(() => {
+        setIsHover(true);
+      }, 300)
+    );
   }, []);
 
   useEffect(() => {
@@ -172,14 +171,21 @@ export default function ColumnTypeView(props: {
     });
   }, [isHover, hasOverflow]);
 
+  useEffect(() => {
+    return () => {
+      hoverViewRef.current = null;
+      wrapperRef.current = null;
+
+      clearTimeout(delayHandler);
+    }
+  }, [])
+
   return (
     <>
       <ColumnTypeViewWrapper
         ref={wrapperRef}
         $textOverflow={props.textOverflow}
-        onMouseEnter={() => {
-          delayMouseEnter();
-        }}
+        onMouseEnter={delayMouseEnter}
         onMouseLeave={() => {
           clearTimeout(delayHandler);
           setIsHover(false);
@@ -208,3 +214,5 @@ export default function ColumnTypeView(props: {
     </>
   );
 }
+
+export default React.memo(ColumnTypeView);

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

@@ -42,6 +42,7 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
+import React from "react";
 
 const ContainWrapper = styled.div<{
   $style: ContainerStyleType & {
@@ -212,6 +213,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
               const containerProps = containers[id].children;
               const noOfColumns = columns.length;
               return (
+                <React.Fragment key={id}>
                 <BackgroundColorContext.Provider value={props.columnStyle.background}>
                   <ColWrapper
                     key={id}
@@ -230,6 +232,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
                     />
                   </ColWrapper>
                 </BackgroundColorContext.Provider>
+                </React.Fragment>
               )
               })
             }

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

@@ -49,6 +49,11 @@ class DragSelectorComp extends React.Component<SectionProps, SectionState> {
     this._onMouseUp = this._onMouseUp.bind(this);
   }
 
+  componentWillUnmount(): void {
+    window.document.removeEventListener("mousemove", this._onMouseMove);
+    window.document.removeEventListener("mouseup", this._onMouseUp);
+  }
+
   _onMouseDown(e: React.MouseEvent<HTMLDivElement>) {
     if (e.button === 2 || e.nativeEvent.which === 2) {
       return;

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

@@ -273,7 +273,7 @@ export const ColumnTagsComp = (function () {
         // The actual eval value is of type number or boolean
         const tagText = String(tag);
         return (
-          <div>
+          <div key={`${tag.split(' ').join('_')}-${index}`}>
             <TagStyled color={getTagColor(tagText, tagOptions)} icon={getTagIcon(tagText, tagOptions)} key={index} >
               {tagText}
             </TagStyled>

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -551,7 +551,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   onCellClick: (columnName: string, dataIndex: string) => void;
 };
 
-function TableCellView(props: {
+const TableCellView = React.memo((props: {
   record: RecordType;
   title: string;
   rowColorFn: RowColorViewType;
@@ -565,7 +565,7 @@ function TableCellView(props: {
   tableSize?: string;
   autoHeight?: boolean;
   loading?: boolean;
-}) {
+}) => {
   const {
     record,
     title,
@@ -648,9 +648,9 @@ function TableCellView(props: {
       {tdView}
     </TableCellContext.Provider>
   );
-}
+});
 
-function TableRowView(props: any) {
+const TableRowView = React.memo((props: any) => {
   const [hover, setHover] = useState(false);
   const [selected, setSelected] = useState(false);
   return (
@@ -665,12 +665,12 @@ function TableRowView(props: any) {
       ></tr>
     </TableRowContext.Provider>
   );
-}
+});
 
 /**
  * A table with adjustable column width, width less than 0 means auto column width
  */
-function ResizeableTable<RecordType extends object>(props: CustomTableProps<RecordType>) {
+function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<RecordType>) {
   const [resizeData, setResizeData] = useState({
     index: -1,
     width: -1,
@@ -760,8 +760,10 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
     ></Table>
   );
 }
+ResizeableTableComp.whyDidYouRender = true;
+
+const ResizeableTable = React.memo(ResizeableTableComp) as typeof ResizeableTableComp;
 
-ResizeableTable.whyDidYouRender = true;
 
 const createNewEmptyRow = (
   rowIndex: number,
@@ -776,11 +778,11 @@ const createNewEmptyRow = (
   return emptyRowData;
 }
 
-export function TableCompView(props: {
+export const TableCompView = React.memo((props: {
   comp: InstanceType<typeof TableImplComp>;
   onRefresh: (allQueryNames: Array<string>, setLoading: (loading: boolean) => void) => void;
   onDownload: (fileName: string) => void;
-}) {
+}) => {
   const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
   const editorState = useContext(EditorContext);
   const currentTheme = useContext(ThemeContext)?.theme;
@@ -1101,4 +1103,4 @@ export function TableCompView(props: {
 
     </BackgroundColorContext.Provider>
   );
-}
+});