Fix React key missing

src/components/Timeline/Default.tsx

@@ -17,7 +17,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { checkInstanceFeature, getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useRef, useState } from 'react'
+import React, { Fragment, useRef, useState } from 'react'
 import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
 import { useSelector } from 'react-redux'
 import * as ContextMenu from 'zeego/context-menu'
@@ -196,8 +196,8 @@ const TimelineDefault: React.FC<Props> = ({
             </ContextMenu.Trigger>
 
             <ContextMenu.Content>
-              {[mShare, mStatus, mInstance].map(type => (
-                <>
+              {[mShare, mStatus, mInstance].map((type, i) => (
+                <Fragment key={i}>
                   {type.map((mGroup, index) => (
                     <ContextMenu.Group key={index}>
                       {mGroup.map(menu => (
@@ -208,7 +208,7 @@ const TimelineDefault: React.FC<Props> = ({
                       ))}
                     </ContextMenu.Group>
                   ))}
-                </>
+                </Fragment>
               ))}
             </ContextMenu.Content>
           </ContextMenu.Root>

src/components/Timeline/Notifications.tsx

@@ -16,7 +16,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { checkInstanceFeature, getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useRef, useState } from 'react'
+import React, { Fragment, useCallback, useRef, useState } from 'react'
 import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import * as ContextMenu from 'zeego/context-menu'
@@ -164,8 +164,8 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
         </ContextMenu.Trigger>
 
         <ContextMenu.Content>
-          {[mShare, mStatus, mInstance].map(type => (
-            <>
+          {[mShare, mStatus, mInstance].map((type, i) => (
+            <Fragment key={i}>
               {type.map((mGroup, index) => (
                 <ContextMenu.Group key={index}>
                   {mGroup.map(menu => (
@@ -176,7 +176,7 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
                   ))}
                 </ContextMenu.Group>
               ))}
-            </>
+            </Fragment>
           ))}
         </ContextMenu.Content>
       </ContextMenu.Root>

src/components/Timeline/Shared/HeaderAndroid.tsx

@@ -4,7 +4,7 @@ import menuStatus from '@components/contextMenu/status'
 import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext, useState } from 'react'
+import React, { Fragment, useContext, useState } from 'react'
 import { Platform, View } from 'react-native'
 import * as DropdownMenu from 'zeego/dropdown-menu'
 import StatusContext from './Context'
@@ -53,8 +53,8 @@ const TimelineHeaderAndroid: React.FC = () => {
           </DropdownMenu.Trigger>
 
           <DropdownMenu.Content>
-            {[mShare, mAccount, mStatus].map(type => (
-              <>
+            {[mShare, mAccount, mStatus].map((type, i) => (
+              <Fragment key={i}>
                 {type.map((mGroup, index) => (
                   <DropdownMenu.Group key={index}>
                     {mGroup.map(menu => (
@@ -65,7 +65,7 @@ const TimelineHeaderAndroid: React.FC = () => {
                     ))}
                   </DropdownMenu.Group>
                 ))}
-              </>
+              </Fragment>
             ))}
           </DropdownMenu.Content>
         </DropdownMenu.Root>

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -4,7 +4,7 @@ import menuStatus from '@components/contextMenu/status'
 import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext, useState } from 'react'
+import React, { Fragment, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, View } from 'react-native'
 import * as DropdownMenu from 'zeego/dropdown-menu'
@@ -83,8 +83,8 @@ const TimelineHeaderDefault: React.FC = () => {
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Content>
-              {[mShare, mAccount, mStatus].map(type => (
-                <>
+              {[mShare, mAccount, mStatus].map((type, i) => (
+                <Fragment key={i}>
                   {type.map((mGroup, index) => (
                     <DropdownMenu.Group key={index}>
                       {mGroup.map(menu => (
@@ -95,7 +95,7 @@ const TimelineHeaderDefault: React.FC = () => {
                       ))}
                     </DropdownMenu.Group>
                   ))}
-                </>
+                </Fragment>
               ))}
             </DropdownMenu.Content>
           </DropdownMenu.Root>

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -10,7 +10,7 @@ import { getInstanceUrl } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as WebBrowser from 'expo-web-browser'
-import React, { useContext, useState } from 'react'
+import React, { Fragment, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
@@ -90,8 +90,8 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
                   </DropdownMenu.Trigger>
 
                   <DropdownMenu.Content>
-                    {[mShare, mStatus, mAccount, mInstance].map(type => (
-                      <>
+                    {[mShare, mStatus, mAccount, mInstance].map((type, i) => (
+                      <Fragment key={i}>
                         {type.map((mGroup, index) => (
                           <DropdownMenu.Group key={index}>
                             {mGroup.map(menu => (
@@ -102,7 +102,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
                             ))}
                           </DropdownMenu.Group>
                         ))}
-                      </>
+                      </Fragment>
                     ))}
                   </DropdownMenu.Content>
                 </DropdownMenu.Root>

src/screens/Tabs/Me/Root/Collections.tsx

@@ -4,11 +4,7 @@ import { useAppDispatch } from '@root/store'
 import { useAnnouncementQuery } from '@utils/queryHooks/announcement'
 import { useListsQuery } from '@utils/queryHooks/lists'
 import { useFollowedTagsQuery } from '@utils/queryHooks/tags'
-import {
-  checkInstanceFeature,
-  getInstanceMePage,
-  updateInstanceMePage
-} from '@utils/slices/instancesSlice'
+import { getInstanceMePage, updateInstanceMePage } from '@utils/slices/instancesSlice'
 import { getInstancePush } from '@utils/slices/instancesSlice'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,10 +17,8 @@ const Collections: React.FC = () => {
   const dispatch = useAppDispatch()
   const mePage = useSelector(getInstanceMePage)
 
-  const canFollowTags = useSelector(checkInstanceFeature('follow_tags'))
   useFollowedTagsQuery({
     options: {
-      enabled: canFollowTags,
       onSuccess: data =>
         dispatch(
           updateInstanceMePage({

src/screens/Tabs/Shared/Account.tsx

@@ -10,7 +10,7 @@ import { useAccountQuery } from '@utils/queryHooks/account'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { Fragment, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Text, View } from 'react-native'
 import { useSharedValue } from 'react-native-reanimated'
@@ -55,8 +55,8 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Content>
-              {[mShare, mAccount].map(type => (
-                <>
+              {[mShare, mAccount].map((type, i) => (
+                <Fragment key={i}>
                   {type.map((mGroup, index) => (
                     <DropdownMenu.Group key={index}>
                       {mGroup.map(menu => (
@@ -67,7 +67,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
                       ))}
                     </DropdownMenu.Group>
                   ))}
-                </>
+                </Fragment>
               ))}
             </DropdownMenu.Content>
           </DropdownMenu.Root>

src/utils/queryHooks/tags.ts

@@ -11,6 +11,8 @@ import {
 } from '@tanstack/react-query'
 import { infinitePageParams } from './utils'
 import { PagedResponse } from '@api/helpers'
+import { useSelector } from 'react-redux'
+import { checkInstanceFeature } from '@utils/slices/instancesSlice'
 
 export type QueryKeyFollowedTags = ['FollowedTags']
 const useFollowedTagsQuery = (
@@ -21,14 +23,23 @@ const useFollowedTagsQuery = (
     >
   } | void
 ) => {
+  const canFollowTags = useSelector(checkInstanceFeature('follow_tags'))
+
   const queryKey: QueryKeyFollowedTags = ['FollowedTags']
   return useInfiniteQuery(
     queryKey,
     async ({ pageParam }: QueryFunctionContext<QueryKeyFollowedTags>) => {
       const params: { [key: string]: string } = { ...pageParam }
-      return await apiInstance<Mastodon.Tag[]>({ method: 'get', url: `followed_tags`, params })
+      return await apiInstance<Mastodon.Tag[]>({
+        method: 'get',
+        url: `followed_tags`,
+        params: { limit: 200, ...params }
+      })
     },
     {
+      enabled: canFollowTags,
+      staleTime: Infinity,
+      cacheTime: Infinity,
       ...params?.options,
       ...infinitePageParams
     }