Use first sorted item in Compare view as 'firstCompareItem' rather than first unsorted item

docs/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Next
 
 * Exotic class item perks will now show up in Compare suggestions
+* Compare view's suggestion buttons will now use the leftmost item's perks instead of an arbitrary item if the initial compare item is removed
 
 ## 8.34.0 <span class="changelog-date">(2024-08-25)</span>
 

src/app/compare/Compare.tsx

@@ -159,24 +159,34 @@ export default function Compare({ session }: { session: CompareSession }) {
     setSortBetterFirst(sortedHash === newSortedHash ? !sortBetterFirst : true);
   };
 
-  // If the session was started with a specific item, this is it
-  const initialItem = session.initialItemId
-    ? compareItems.find((i) => i.id === session.initialItemId)
-    : undefined;
-  const firstCompareItem = compareItems[0];
-  // The example item is the one we'll use for generating suggestion buttons
-  const exampleItem = initialItem || firstCompareItem;
-
-  const items = useMemo(() => {
+  const sortedComparisonItems = useMemo(() => {
     const comparator = sortCompareItemsComparator(
       sortedHash,
       sortBetterFirst,
       doCompareBaseStats,
       allStats,
       session.initialItemId,
     );
-    const sortedComparisonItems = compareItems.toSorted(comparator);
-    return (
+    return compareItems.toSorted(comparator);
+  }, [
+    sortedHash,
+    sortBetterFirst,
+    doCompareBaseStats,
+    allStats,
+    session.initialItemId,
+    compareItems,
+  ]);
+
+  // If the session was started with a specific item, this is it
+  const initialItem = session.initialItemId
+    ? compareItems.find((i) => i.id === session.initialItemId)
+    : undefined;
+  const firstCompareItem = sortedComparisonItems[0];
+  // The example item is the one we'll use for generating suggestion buttons
+  const exampleItem = initialItem || firstCompareItem;
+
+  const items = useMemo(
+    () => (
       <CompareItems
         items={sortedComparisonItems}
         allStats={allStats}
@@ -186,17 +196,16 @@ export default function Compare({ session }: { session: CompareSession }) {
         doCompareBaseStats={doCompareBaseStats}
         initialItemId={session.initialItemId}
       />
-    );
-  }, [
-    allStats,
-    compareItems,
-    doCompareBaseStats,
-    onPlugClicked,
-    remove,
-    session.initialItemId,
-    sortBetterFirst,
-    sortedHash,
-  ]);
+    ),
+    [
+      sortedComparisonItems,
+      allStats,
+      doCompareBaseStats,
+      onPlugClicked,
+      remove,
+      session.initialItemId,
+    ],
+  );
 
   const header = (
     <div className={styles.options}>