memoize each module individually (#8111)

src/screens/Search/Explore.tsx

@@ -325,29 +325,16 @@ export function Explore({
     fetchNextPageFeedPreviews,
   ])
 
-  const items = useMemo<ExploreScreenItems[]>(() => {
+  const topBorder = useMemo(
+    () => ({type: 'topBorder', key: 'top-border'} as const),
+    [],
+  )
+  const trendingTopicsModule = useMemo(
+    () => ({type: 'trendingTopics', key: 'trending-topics'} as const),
+    [],
+  )
+  const suggestedFollowsModule = useMemo(() => {
     const i: ExploreScreenItems[] = []
-
-    const addTopBorder = () => {
-      i.push({type: 'topBorder', key: 'top-border'})
-    }
-
-    const addTrendingTopicsModule = () => {
-      i.push({
-        type: 'trendingTopics',
-        key: `trending-topics`,
-      })
-
-      // temp - disable trending videos
-      // if (isNative) {
-      //   i.push({
-      //     type: 'trendingVideos',
-      //     key: `trending-videos`,
-      //   })
-      // }
-    }
-
-    const addSuggestedFollowsModule = () => {
     i.push({
       type: 'tabbedHeader',
       key: 'suggested-accounts-header',
@@ -414,9 +401,19 @@ export function Explore({
         i.push({type: 'profilePlaceholder', key: 'profilePlaceholder'})
       }
     }
-    }
-
-    const addSuggestedFeedsModule = () => {
+    return i
+  }, [
+    profiles,
+    _,
+    canShowSuggestedProfiles,
+    hasNextProfilesPage,
+    isLoadingMoreProfiles,
+    moderationOpts,
+    onLoadMoreProfiles,
+    profilesError,
+  ])
+  const suggestedFeedsModule = useMemo(() => {
+    const i: ExploreScreenItems[] = []
     i.push({
       type: 'header',
       key: 'suggested-feeds-header',
@@ -505,9 +502,20 @@ export function Explore({
         i.push({type: 'feedPlaceholder', key: 'feedPlaceholder'})
       }
     }
-    }
-
-    const addSuggestedStarterPacksModule = () => {
+    return i
+  }, [
+    feeds,
+    _,
+    feedsError,
+    hasNextFeedsPage,
+    hasPressedLoadMoreFeeds,
+    isLoadingMoreFeeds,
+    onLoadMoreFeeds,
+    preferences,
+    preferencesError,
+  ])
+  const suggestedStarterPacksModule = useMemo(() => {
+    const i: ExploreScreenItems[] = []
     i.push({
       type: 'header',
       key: 'suggested-starterPacks-header',
@@ -516,7 +524,7 @@ export function Explore({
     })
 
     if (isLoadingSuggestedSPs) {
-        Array.from({length: 3}).forEach((_, index) =>
+      Array.from({length: 3}).forEach((__, index) =>
         i.push({
           type: 'starterPackSkeleton',
           key: `starterPackSkeleton-${index}`,
@@ -534,9 +542,10 @@ export function Explore({
         })
       })
     }
-    }
-
-    const addFeedPreviews = () => {
+    return i
+  }, [suggestedSPs, _, isLoadingSuggestedSPs, suggestedSPsError])
+  const feedPreviewsModule = useMemo(() => {
+    const i: ExploreScreenItems[] = []
     i.push(...feedPreviewSlices)
     if (isFetchingNextPageFeedPreviews) {
       i.push({
@@ -544,53 +553,40 @@ export function Explore({
         key: 'preview-loading-more',
       })
     }
-    }
+    return i
+  }, [feedPreviewSlices, isFetchingNextPageFeedPreviews])
+
+  const isNewUser = guide?.guide === 'follow-10' && !guide.isComplete
+  const items = useMemo<ExploreScreenItems[]>(() => {
+    const i: ExploreScreenItems[] = []
 
     // Dynamic module ordering
 
-    addTopBorder()
-
-    if (guide?.guide === 'follow-10' && !guide.isComplete) {
-      addSuggestedFollowsModule()
-      addSuggestedStarterPacksModule()
-      addTrendingTopicsModule()
+    i.push(topBorder)
+    if (isNewUser) {
+      i.push(...suggestedFollowsModule)
+      i.push(...suggestedStarterPacksModule)
+      i.push(trendingTopicsModule)
     } else {
-      addTrendingTopicsModule()
-      addSuggestedFollowsModule()
-      addSuggestedStarterPacksModule()
+      i.push(trendingTopicsModule)
+      i.push(...suggestedFollowsModule)
+      i.push(...suggestedStarterPacksModule)
     }
-
     if (gate('explore_show_suggested_feeds')) {
-      addSuggestedFeedsModule()
+      i.push(...suggestedFeedsModule)
     }
-
-    addFeedPreviews()
+    i.push(...feedPreviewsModule)
 
     return i
   }, [
-    _,
-    profiles,
-    feeds,
-    preferences,
-    onLoadMoreFeeds,
-    onLoadMoreProfiles,
-    isLoadingMoreProfiles,
-    isLoadingMoreFeeds,
-    profilesError,
-    feedsError,
-    preferencesError,
-    hasNextProfilesPage,
-    hasNextFeedsPage,
-    guide,
+    topBorder,
+    isNewUser,
+    suggestedFollowsModule,
+    suggestedStarterPacksModule,
+    suggestedFeedsModule,
+    trendingTopicsModule,
+    feedPreviewsModule,
     gate,
-    moderationOpts,
-    hasPressedLoadMoreFeeds,
-    suggestedSPs,
-    isLoadingSuggestedSPs,
-    suggestedSPsError,
-    feedPreviewSlices,
-    isFetchingNextPageFeedPreviews,
-    canShowSuggestedProfiles,
   ])
 
   const renderItem = useCallback(
@@ -709,7 +705,7 @@ export function Explore({
         case 'profilePlaceholder': {
           return (
             <>
-              {Array.from({length: 3}).map((_, index) => (
+              {Array.from({length: 3}).map((__, i) => (
                 <View
                   style={[
                     a.px_lg,
@@ -717,7 +713,7 @@ export function Explore({
                     a.border_t,
                     t.atoms.border_contrast_low,
                   ]}
-                  key={index}>
+                  key={i}>
                   <ProfileCard.Outer>
                     <ProfileCard.Header>
                       <ProfileCard.AvatarPlaceholder />