From f38b82854dc5ac2753bc7e5410dcad600b2b39f5 Mon Sep 17 00:00:00 2001
From: Clay Miller <clay@smockle.com>
Date: Fri, 18 Jun 2021 16:20:36 -0400
Subject: [PATCH] fix: Memoize 'id' so 'Item's and labels match

---
 src/ActionList/Item.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 4a7b2c20e1c..d3d8797f3c9 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -1,5 +1,5 @@
 import {CheckIcon, IconProps} from '@primer/octicons-react'
-import React, {useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import Truncate from '../Truncate'
@@ -307,10 +307,12 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
     onKeyPress,
     children,
     onClick,
-    id = uniqueId(),
+    id: _id,
     ...props
   } = itemProps
 
+  const id = useMemo(() => _id ?? uniqueId(), [_id])
+
   const keyPressHandler = useCallback(
     event => {
       if (disabled) {