prevent duplicate keys in feed tab bar (#2666)

src/view/com/pager/FeedsTabBar.web.tsx

@@ -88,11 +88,17 @@ function FeedsTabBarTablet(
   const navigation = useNavigation<NavigationProp>()
   const {headerMinimalShellTransform} = useMinimalShellMode()
   const {headerHeight} = useShellLayout()
-  const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : []
-  const showFeedsLinkInTabBar = hasSession && !hasPinnedCustom
-  const items = showFeedsLinkInTabBar
-    ? pinnedDisplayNames.concat('Feeds ✨')
-    : pinnedDisplayNames
+
+  const items = React.useMemo(() => {
+    if (!hasSession) return []
+
+    const pinnedNames = feeds.map(f => f.displayName)
+
+    if (!hasPinnedCustom) {
+      return pinnedNames.concat('Feeds ✨')
+    }
+    return pinnedNames
+  }, [hasSession, hasPinnedCustom, feeds])
 
   const onPressDiscoverFeeds = React.useCallback(() => {
     if (isWeb) {
@@ -105,13 +111,13 @@ function FeedsTabBarTablet(
 
   const onSelect = React.useCallback(
     (index: number) => {
-      if (showFeedsLinkInTabBar && index === items.length - 1) {
+      if (hasSession && !hasPinnedCustom && index === items.length - 1) {
         onPressDiscoverFeeds()
       } else if (props.onSelect) {
         props.onSelect(index)
       }
     },
-    [items.length, onPressDiscoverFeeds, props, showFeedsLinkInTabBar],
+    [items.length, onPressDiscoverFeeds, props, hasSession, hasPinnedCustom],
   )
 
   return (

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -36,11 +36,17 @@ export function FeedsTabBar(
   const {feeds, hasPinnedCustom} = usePinnedFeedsInfos()
   const {headerHeight} = useShellLayout()
   const {headerMinimalShellTransform} = useMinimalShellMode()
-  const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : []
-  const showFeedsLinkInTabBar = hasSession && !hasPinnedCustom
-  const items = showFeedsLinkInTabBar
-    ? pinnedDisplayNames.concat('Feeds ✨')
-    : pinnedDisplayNames
+
+  const items = React.useMemo(() => {
+    if (!hasSession) return []
+
+    const pinnedNames = feeds.map(f => f.displayName)
+
+    if (!hasPinnedCustom) {
+      return pinnedNames.concat('Feeds ✨')
+    }
+    return pinnedNames
+  }, [hasSession, hasPinnedCustom, feeds])
 
   const onPressFeedsLink = React.useCallback(() => {
     if (isWeb) {
@@ -53,13 +59,13 @@ export function FeedsTabBar(
 
   const onSelect = React.useCallback(
     (index: number) => {
-      if (showFeedsLinkInTabBar && index === items.length - 1) {
+      if (hasSession && !hasPinnedCustom && index === items.length - 1) {
         onPressFeedsLink()
       } else if (props.onSelect) {
         props.onSelect(index)
       }
     },
-    [items.length, onPressFeedsLink, props, showFeedsLinkInTabBar],
+    [items.length, onPressFeedsLink, props, hasSession, hasPinnedCustom],
   )
 
   const onPressAvi = React.useCallback(() => {

src/view/com/pager/TabBar.tsx

@@ -78,7 +78,7 @@ export function TabBar({
           return (
             <PressableWithHover
               testID={`${testID}-selector-${i}`}
-              key={item}
+              key={`${item}-${i}`}
               onLayout={e => onItemLayout(e, i)}
               style={[styles.item, selected && indicatorStyle]}
               hoverStyle={pal.viewLight}