From 297c112678c7beb9d64ba6ac8f8ff0e3eeeb0e0c Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.dev>
Date: Thu, 26 Dec 2024 14:59:49 +0100
Subject: [PATCH] perf

---
 .../content/docs/en/components/changelog.mdx  |   4 +-
 .../default/plate-ui/table-cell-element.tsx   | 248 +++++++++++-------
 .../TableCellElement/useTableCellElement.ts   |   5 +-
 .../useTableCellElementResizable.ts           |  66 ++---
 4 files changed, 203 insertions(+), 120 deletions(-)

diff --git a/apps/www/content/docs/en/components/changelog.mdx b/apps/www/content/docs/en/components/changelog.mdx
index 5d690f750a..d32fe89a86 100644
--- a/apps/www/content/docs/en/components/changelog.mdx
+++ b/apps/www/content/docs/en/components/changelog.mdx
@@ -18,7 +18,9 @@ v42
   - Move icons to `table-icons`
   - Remove `colgroup`, col width is now set in `table-cell-element`
 - `table-row-element`: remove `hideBorder` prop
-- `table-cell-element`, `table-cell-element-static`: column hover/resizing state is now using Tailwind instead of JS
+- `table-cell-element`, `table-cell-element-static`: 
+  - column hover/resizing state is now using Tailwind instead of JS
+  - React.memo
 - `table-dropdown-menu`:
   - dynamic table insert
   - merge/split cells
diff --git a/apps/www/src/registry/default/plate-ui/table-cell-element.tsx b/apps/www/src/registry/default/plate-ui/table-cell-element.tsx
index 84afcab3c3..d2e3ab1163 100644
--- a/apps/www/src/registry/default/plate-ui/table-cell-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/table-cell-element.tsx
@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import type { BorderStylesDefault } from '@udecode/plate-table';
+
 import { cn, withProps, withRef } from '@udecode/cn';
 import { useEditorPlugin, useElement } from '@udecode/plate-common/react';
 import { useBlockSelected } from '@udecode/plate-selection/react';
@@ -24,11 +26,7 @@ export const TableCellElement = withRef<
     isHeader?: boolean;
   }
 >(({ children, className, isHeader, style, ...props }, ref) => {
-  const { element } = props;
-  const { api } = useEditorPlugin(TablePlugin);
-  const readOnly = useReadOnly();
   const rowElement = useElement(TableRowPlugin.key);
-  const isSelectingRow = useBlockSelected(rowElement.id as string);
 
   const {
     borders,
@@ -49,100 +47,174 @@ export const TableCellElement = withRef<
     });
 
   return (
-    <PlateElement
+    <TableCellElementMemo
       ref={ref}
-      as={isHeader ? 'th' : 'td'}
-      className={cn(
+      selected={selected}
+      borders={borders}
+      bottomProps={bottomProps}
+      colIndex={colIndex}
+      colSpan={colSpan}
+      hiddenLeft={hiddenLeft}
+      isSelectingCell={isSelectingCell}
+      leftProps={leftProps}
+      minHeight={minHeight}
+      rightProps={rightProps}
+      rowId={rowElement.id as string}
+      rowIndex={rowIndex}
+      width={width}
+      {...props}
+    >
+      {children}
+    </TableCellElementMemo>
+  );
+});
+
+const TableCellElementMemo = React.memo(
+  React.forwardRef<
+    React.ComponentRef<typeof PlateElement>,
+    React.ComponentPropsWithoutRef<typeof PlateElement> & {
+      borders: BorderStylesDefault;
+      bottomProps: React.ComponentPropsWithoutRef<typeof ResizeHandle>;
+      colIndex: number;
+      colSpan: number;
+      hiddenLeft: boolean;
+      isSelectingCell: boolean;
+      leftProps: React.ComponentPropsWithoutRef<typeof ResizeHandle>;
+      rightProps: React.ComponentPropsWithoutRef<typeof ResizeHandle>;
+      rowId: string;
+      rowIndex: number;
+      selected: boolean;
+      width: number | string;
+      isHeader?: boolean;
+      minHeight?: number | string;
+    }
+  >(
+    (
+      {
+        borders,
+        bottomProps,
+        children,
         className,
-        'relative h-full overflow-visible border-none bg-background p-0',
-        element.background ? 'bg-[--cellBackground]' : 'bg-background',
-
-        cn(
-          isHeader && 'text-left [&_>_*]:m-0',
-          'before:size-full',
-          selected && 'before:z-10 before:bg-muted',
-          "before:absolute before:box-border before:select-none before:content-['']",
-          borders &&
+        colIndex,
+        hiddenLeft,
+        isHeader,
+        isSelectingCell,
+        leftProps,
+        minHeight,
+        rightProps,
+        rowId,
+        rowIndex,
+        selected,
+        style,
+        width,
+        ...props
+      },
+      ref
+    ) => {
+      const { api } = useEditorPlugin(TablePlugin);
+      const readOnly = useReadOnly();
+      const isSelectingRow = useBlockSelected(rowId);
+
+      const element = useElement();
+
+      return (
+        <PlateElement
+          ref={ref}
+          as={isHeader ? 'th' : 'td'}
+          className={cn(
+            className,
+            'relative h-full overflow-visible border-none bg-background p-0',
+            element.background ? 'bg-[--cellBackground]' : 'bg-background',
+
             cn(
-              borders.bottom?.size && `before:border-b before:border-b-border`,
-              borders.right?.size && `before:border-r before:border-r-border`,
-              borders.left?.size && `before:border-l before:border-l-border`,
-              borders.top?.size && `before:border-t before:border-t-border`
+              isHeader && 'text-left [&_>_*]:m-0',
+              'before:size-full',
+              selected && 'before:z-10 before:bg-muted',
+              "before:absolute before:box-border before:select-none before:content-['']",
+              borders &&
+                cn(
+                  borders.bottom?.size &&
+                    `before:border-b before:border-b-border`,
+                  borders.right?.size &&
+                    `before:border-r before:border-r-border`,
+                  borders.left?.size &&
+                    `before:border-l before:border-l-border`,
+                  borders.top?.size && `before:border-t before:border-t-border`
+                )
             )
-        )
-      )}
-      style={
-        {
-          '--cellBackground': element.background,
-          maxWidth: width || 240,
-          minWidth: width || 120,
-          ...style,
-        } as React.CSSProperties
-      }
-      {...{
-        colSpan: api.table.getColSpan(element),
-        rowSpan: api.table.getRowSpan(element),
-      }}
-      {...props}
-    >
-      <div
-        className="relative z-20 box-border h-full px-4 py-2"
-        style={{ minHeight }}
-      >
-        {children}
-      </div>
-
-      {!isSelectingCell && (
-        <div
-          className="group absolute top-0 size-full select-none"
-          contentEditable={false}
-          suppressContentEditableWarning={true}
+          )}
+          style={
+            {
+              '--cellBackground': element.background,
+              maxWidth: width || 240,
+              minWidth: width || 120,
+              ...style,
+            } as React.CSSProperties
+          }
+          {...{
+            colSpan: api.table.getColSpan(element),
+            rowSpan: api.table.getRowSpan(element),
+          }}
+          {...props}
         >
-          {!readOnly && (
-            <>
-              <ResizeHandle
-                {...rightProps}
-                className="-right-1 -top-2 h-[calc(100%_+_8px)] w-2"
-                data-col={colIndex}
-              />
-              <ResizeHandle {...bottomProps} className="-bottom-1 h-2" />
-              {!hiddenLeft && (
-                <ResizeHandle
-                  {...leftProps}
-                  className="-left-1 top-0 w-2"
-                  data-resizer-left={colIndex === 0 ? 'true' : undefined}
-                />
-              )}
+          <div
+            className="relative z-20 box-border h-full px-4 py-2"
+            style={{ minHeight }}
+          >
+            {children}
+          </div>
+
+          {!isSelectingCell && (
+            <div
+              className="group absolute top-0 size-full select-none"
+              contentEditable={false}
+              suppressContentEditableWarning={true}
+            >
+              {!readOnly && (
+                <>
+                  <ResizeHandle
+                    {...rightProps}
+                    className="-right-1 -top-2 h-[calc(100%_+_8px)] w-2"
+                    data-col={colIndex}
+                  />
+                  <ResizeHandle {...bottomProps} className="-bottom-1 h-2" />
+                  {!hiddenLeft && (
+                    <ResizeHandle
+                      {...leftProps}
+                      className="-left-1 top-0 w-2"
+                      data-resizer-left={colIndex === 0 ? 'true' : undefined}
+                    />
+                  )}
 
-              <div
-                className={cn(
-                  'absolute top-0 z-30 hidden h-full w-1 bg-ring',
-                  'right-[-1.5px]',
-                  columnResizeVariants({ colIndex: colIndex as any })
-                )}
-              />
-              {colIndex === 0 && (
-                <div
-                  className={cn(
-                    'absolute top-0 z-30 h-full w-1 bg-ring',
-                    'left-[-1.5px]',
-                    'hidden animate-in fade-in group-has-[[data-resizer-left]:hover]/table:block group-has-[[data-resizer-left][data-resizing="true"]]/table:block'
+                  <div
+                    className={cn(
+                      'absolute top-0 z-30 hidden h-full w-1 bg-ring',
+                      'right-[-1.5px]',
+                      columnResizeVariants({ colIndex: colIndex as any })
+                    )}
+                  />
+                  {colIndex === 0 && (
+                    <div
+                      className={cn(
+                        'absolute top-0 z-30 h-full w-1 bg-ring',
+                        'left-[-1.5px]',
+                        'hidden animate-in fade-in group-has-[[data-resizer-left]:hover]/table:block group-has-[[data-resizer-left][data-resizing="true"]]/table:block'
+                      )}
+                    />
                   )}
-                />
+                </>
               )}
-            </>
+            </div>
           )}
-        </div>
-      )}
 
-      {isSelectingRow && (
-        <div className={blockSelectionVariants()} contentEditable={false} />
-      )}
-    </PlateElement>
-  );
-});
-
-TableCellElement.displayName = 'TableCellElement';
+          {isSelectingRow && (
+            <div className={blockSelectionVariants()} contentEditable={false} />
+          )}
+        </PlateElement>
+      );
+    }
+  )
+);
 
 export const TableCellHeaderElement = withProps(TableCellElement, {
   isHeader: true,
diff --git a/packages/table/src/react/components/TableCellElement/useTableCellElement.ts b/packages/table/src/react/components/TableCellElement/useTableCellElement.ts
index 022e535e6c..5061f96b53 100644
--- a/packages/table/src/react/components/TableCellElement/useTableCellElement.ts
+++ b/packages/table/src/react/components/TableCellElement/useTableCellElement.ts
@@ -49,7 +49,10 @@ export const useTableCellElement = (): TableCellElementState => {
     [api.table, colSizes, element]
   );
 
-  const borders = getTableCellBorders(editor, { element });
+  const borders = React.useMemo(
+    () => getTableCellBorders(editor, { element }),
+    [editor, element]
+  );
 
   React.useEffect(() => {
     setIndices(
diff --git a/packages/table/src/react/components/TableCellElement/useTableCellElementResizable.ts b/packages/table/src/react/components/TableCellElement/useTableCellElementResizable.ts
index af0cce7092..d3f6813072 100644
--- a/packages/table/src/react/components/TableCellElement/useTableCellElementResizable.ts
+++ b/packages/table/src/react/components/TableCellElement/useTableCellElementResizable.ts
@@ -60,6 +60,11 @@ export const useTableCellElementResizable = ({
   const colSizesWithoutOverrides = useTableColSizes(tableElement, {
     disableOverrides: true,
   });
+  const colSizesWithoutOverridesRef = React.useRef(colSizesWithoutOverrides);
+  React.useEffect(() => {
+    colSizesWithoutOverridesRef.current = colSizesWithoutOverrides;
+  }, [colSizesWithoutOverrides]);
+
   const { marginLeft = 0 } = tableElement;
 
   const overrideColSize = useOverrideColSize();
@@ -112,7 +117,7 @@ export const useTableCellElementResizable = ({
 
   const handleResizeRight = React.useCallback(
     ({ delta, finished, initialSize: currentInitial }: ResizeEvent) => {
-      const nextInitial = colSizesWithoutOverrides[colIndex + 1];
+      const nextInitial = colSizesWithoutOverridesRef.current[colIndex + 1];
 
       const complement = (width: number) =>
         currentInitial + nextInitial - width;
@@ -132,14 +137,7 @@ export const useTableCellElementResizable = ({
 
       if (nextNew) fn(colIndex + 1, nextNew);
     },
-    [
-      colIndex,
-      colSizesWithoutOverrides,
-      minColumnWidth,
-      overrideColSize,
-      setColSize,
-      stepX,
-    ]
+    [colIndex, minColumnWidth, overrideColSize, setColSize, stepX]
   );
 
   const handleResizeBottom = React.useCallback(
@@ -160,7 +158,7 @@ export const useTableCellElementResizable = ({
 
   const handleResizeLeft = React.useCallback(
     (event: ResizeEvent) => {
-      const initial = colSizesWithoutOverrides[colIndex];
+      const initial = colSizesWithoutOverridesRef.current[colIndex];
 
       const complement = (width: number) => initial + marginLeft - width;
 
@@ -184,7 +182,6 @@ export const useTableCellElementResizable = ({
     },
     [
       colIndex,
-      colSizesWithoutOverrides,
       marginLeft,
       minColumnWidth,
       overrideColSize,
@@ -198,25 +195,34 @@ export const useTableCellElementResizable = ({
   const hasLeftHandle = colIndex === 0 && !disableMarginLeft;
 
   return {
-    bottomProps: {
-      options: {
-        direction: 'bottom',
-        onResize: handleResizeBottom,
-      },
-    },
+    bottomProps: React.useMemo(
+      () => ({
+        options: {
+          direction: 'bottom',
+          onResize: handleResizeBottom,
+        },
+      }),
+      [handleResizeBottom]
+    ),
     hiddenLeft: !hasLeftHandle,
-    leftProps: {
-      options: {
-        direction: 'left',
-        onResize: handleResizeLeft,
-      },
-    },
-    rightProps: {
-      options: {
-        direction: 'right',
-        initialSize: initialWidth,
-        onResize: handleResizeRight,
-      },
-    },
+    leftProps: React.useMemo(
+      () => ({
+        options: {
+          direction: 'left',
+          onResize: handleResizeLeft,
+        },
+      }),
+      [handleResizeLeft]
+    ),
+    rightProps: React.useMemo(
+      () => ({
+        options: {
+          direction: 'right',
+          initialSize: initialWidth,
+          onResize: handleResizeRight,
+        },
+      }),
+      [initialWidth, handleResizeRight]
+    ),
   };
 };