Fix pinned feeds mutation issue (#2016)

src/state/queries/feed.ts

@@ -252,7 +252,6 @@ export function usePinnedFeedsInfos(): FeedSourceInfo[] {
     FOLLOWING_FEED_STUB,
   ])
   const {data: preferences} = usePreferencesQuery()
-  const pinnedFeedsKey = JSON.stringify(preferences?.feeds?.pinned)
 
   React.useEffect(() => {
     if (!preferences?.feeds?.pinned) return
@@ -299,13 +298,7 @@ export function usePinnedFeedsInfos(): FeedSourceInfo[] {
     }
 
     fetchFeedInfo()
-  }, [
+  }, [queryClient, setTabs, preferences?.feeds?.pinned])
-    queryClient,
-    setTabs,
-    preferences?.feeds?.pinned,
-    // ensure we react to re-ordering
-    pinnedFeedsKey,
-  ])
 
   return tabs
 }

src/view/screens/Home.tsx

@@ -57,9 +57,7 @@ function HomeScreenReady({
       }
     }
     return feeds
-    // TODO careful, needed to disabled this -esb
+  }, [preferences.feeds.pinned])
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preferences.feeds.pinned, pinnedFeedOrderKey])
 
   const homeFeedParams = React.useMemo<FeedParams>(() => {
     return {

src/view/screens/SavedFeeds.tsx

@@ -185,7 +185,8 @@ function ListItem({
       queryClient.getQueryData<UsePreferencesQueryResponse>(
         preferencesQueryKey,
       )?.feeds
-    const pinned = feeds?.pinned ?? []
+    // create new array, do not mutate
+    const pinned = feeds?.pinned ? [...feeds.pinned] : []
     const index = pinned.indexOf(feedUri)
 
     if (index === -1 || index === 0) return
@@ -210,7 +211,8 @@ function ListItem({
       queryClient.getQueryData<UsePreferencesQueryResponse>(
         preferencesQueryKey,
       )?.feeds
-    const pinned = feeds?.pinned ?? []
+    // create new array, do not mutate
+    const pinned = feeds?.pinned ? [...feeds.pinned] : []
     const index = pinned.indexOf(feedUri)
 
     if (index === -1 || index >= pinned.length - 1) return