Fix pinned feeds re-ordering (#2014)

src/view/screens/Home.tsx

@@ -40,6 +40,12 @@ function HomeScreenReady({
   const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
   const [selectedPage, setSelectedPage] = React.useState(0)
 
+  /**
+   * Used to ensure that we re-compute `customFeeds` AND force a re-render of
+   * the pager with the new order of feeds.
+   */
+  const pinnedFeedOrderKey = JSON.stringify(preferences.feeds.pinned)
+
   const customFeeds = React.useMemo(() => {
     const pinned = preferences.feeds.pinned
     const feeds: FeedDescriptor[] = []
@@ -51,7 +57,9 @@ function HomeScreenReady({
       }
     }
     return feeds
-  }, [preferences.feeds.pinned])
+    // TODO careful, needed to disabled this -esb
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferences.feeds.pinned, pinnedFeedOrderKey])
 
   const homeFeedParams = React.useMemo<FeedParams>(() => {
     return {
@@ -83,7 +91,6 @@ function HomeScreenReady({
     emitSoftReset()
   }, [])
 
-  // TODO(pwi) may need this in public view
   const onPageScrollStateChanged = React.useCallback(
     (state: 'idle' | 'dragging' | 'settling') => {
       if (state === 'dragging') {
@@ -118,6 +125,7 @@ function HomeScreenReady({
 
   return hasSession ? (
     <Pager
+      key={pinnedFeedOrderKey}
       testID="homeScreen"
       onPageSelected={onPageSelected}
       onPageScrollStateChanged={onPageScrollStateChanged}