perf: memo onMouseEnter、onMouseLeave

react-component · Dec 20, 2023 · bdaf038 · bdaf038
1 parent b0b072c
commit bdaf038
Showing 1 changed file with 18 additions and 12 deletions.
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -153,21 +153,27 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   // ====================== Hover =======================
   const [hovering, onHover] = useHoverState(index, mergedRowSpan);
 
-  const onMouseEnter: React.MouseEventHandler<HTMLTableCellElement> = event => {
-    if (record) {
-      onHover(index, index + mergedRowSpan - 1);
-    }
+  const onMouseEnter: React.MouseEventHandler<HTMLTableCellElement> = React.useCallback(
+    event => {
+      if (record) {
+        onHover(index, index + mergedRowSpan - 1);
+      }
 
-    additionalProps?.onMouseEnter?.(event);
-  };
+      additionalProps?.onMouseEnter?.(event);
+    },
+    [record, onHover, index, mergedRowSpan, additionalProps?.onMouseEnter],
+  );
 
-  const onMouseLeave: React.MouseEventHandler<HTMLTableCellElement> = event => {
-    if (record) {
-      onHover(-1, -1);
-    }
+  const onMouseLeave: React.MouseEventHandler<HTMLTableCellElement> = React.useCallback(
+    event => {
+      if (record) {
+        onHover(-1, -1);
+      }
 
-    additionalProps?.onMouseLeave?.(event);
-  };
+      additionalProps?.onMouseLeave?.(event);
+    },
+    [record, onHover, additionalProps?.onMouseLeave],
+  );
 
   // ====================== Render ======================
   if (mergedColSpan === 0 || mergedRowSpan === 0) {