fix: Items unique key warning in dropdown menu to avoid rerenders

pancakeswap · Nov 7, 2024 · 870d2e3 · 870d2e3
1 parent 2857787
commit 870d2e3
Showing 1 changed file with 31 additions and 23 deletions.
diff --git a/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx b/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx
@@ -70,8 +70,28 @@ const MenuItem: React.FC<{
     return disabled || isDisabled ? "disabled" : "textSubtle";
   }, [activeSubItemChildItem, disabled, hasChildItems, isDisabled, item]);
 
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (hasChildItems) {
+        handleToggleSubMenu(e);
+      } else {
+        setIsOpen(false);
+        itemProps?.onClick?.(e);
+      }
+    },
+    [hasChildItems, handleToggleSubMenu, setIsOpen, itemProps?.onClick]
+  );
+
+  const handleExternalClick = useCallback(
+    (e: any) => {
+      setIsOpen(false);
+      itemProps?.onClick?.(e);
+    },
+    [setIsOpen, itemProps?.onClick]
+  );
+
   return (
-    <StyledDropdownMenuItemContainer key={label?.toString()}>
+    <StyledDropdownMenuItemContainer>
       {type === DropdownMenuItemType.BUTTON && (
         <DropdownMenuItem $isActive={isActive} disabled={disabled || isDisabled} type="button" {...itemProps}>
           {MenuItemContent}
@@ -84,14 +104,7 @@ const MenuItem: React.FC<{
           href={href}
           {...itemProps}
           $isActive={isActive}
-          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-            if (hasChildItems) {
-              handleToggleSubMenu(e);
-            } else {
-              setIsOpen(false);
-              itemProps.onClick?.(e);
-            }
-          }}
+          onClick={handleClick}
         >
           {MenuItemContent}
           {hasChildItems && (
@@ -112,10 +125,7 @@ const MenuItem: React.FC<{
           as="a"
           href={href}
           target="_blank"
-          onClick={(e: any) => {
-            setIsOpen(false);
-            itemProps.onClick?.(e);
-          }}
+          onClick={handleExternalClick}
         >
           <Flex alignItems="center" justifyContent="space-between" width="100%">
             {MenuItemContent}
@@ -130,10 +140,10 @@ const MenuItem: React.FC<{
         hasChildItems &&
         items
           ?.filter((childItem) => ((isMobile || isMd) && childItem.isMobileOnly) || !childItem.isMobileOnly)
-          ?.map((childItem) => (
+          ?.map((childItem, index) => (
             <MenuItem
               isChildItems
-              key={childItem?.label?.toString()}
+              key={childItem?.label?.toString() || `delimiter${index}`}
               item={childItem}
               isDisabled={isDisabled}
               linkComponent={linkComponent}
@@ -211,15 +221,13 @@ const DropdownMenu: React.FC<React.PropsWithChildren<DropdownMenuProps>> = ({
     }, [setIsOpen])
   );
 
+  const handlePointerDown = useCallback(() => {
+    setIsOpen((s) => !s);
+  }, []);
+
   return (
     <Box ref={setTargetRef} {...props}>
-      <Box
-        onPointerDown={() => {
-          setIsOpen((s) => !s);
-        }}
-      >
-        {children}
-      </Box>
+      <Box onPointerDown={handlePointerDown}>{children}</Box>
       {hasItems && (
         <StyledDropdownMenu
           ref={setTooltipRef}
@@ -232,7 +240,7 @@ const DropdownMenu: React.FC<React.PropsWithChildren<DropdownMenuProps>> = ({
             .filter((item) => ((isMobile || isMd) && item.isMobileOnly) || !item.isMobileOnly)
             .map((item) => (
               <MenuItem
-                key={item?.label?.toString()}
+                key={item?.label?.toString() || `delimiter${index}`}
                 item={item}
                 activeItem={activeItem}
                 activeSubItemChildItem={activeSubItemChildItem}