[Explore] Add flatlist perf-related props (#8120)

* Add flatlist perf-related props

* Make keys more unique

* Small gap

---------

Co-authored-by: Eric Bailey <git@esb.lol>

2 files changed, 10 insertions, 2 deletions

diff --git a/src/screens/Search/Explore.tsx b/src/screens/Search/Explore.tsx
index 26e8b36eb..d1ea4be97 100644
--- a/src/screens/Search/Explore.tsx
+++ b/src/screens/Search/Explore.tsx
@@ -8,6 +8,7 @@ import {
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {useGate} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -38,7 +39,7 @@ import {
 import {ExploreRecommendations} from '#/screens/Search/modules/ExploreRecommendations'
 import {ExploreTrendingTopics} from '#/screens/Search/modules/ExploreTrendingTopics'
 import {ExploreTrendingVideos} from '#/screens/Search/modules/ExploreTrendingVideos'
-import {atoms as a, native, useTheme, web} from '#/alf'
+import {atoms as a, native, platform, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
@@ -190,6 +191,7 @@ export function Explore({
 }) {
   const {_} = useLingui()
   const t = useTheme()
+  const initialNumToRender = useInitialNumToRender()
   const {data: preferences, error: preferencesError} = usePreferencesQuery()
   const moderationOpts = useModerationOpts()
   const gate = useGate()
@@ -923,7 +925,11 @@ export function Explore({
       viewabilityConfig={viewabilityConfig}
       onViewableItemsChanged={onViewableItemsChanged}
       onEndReached={onLoadMoreFeedPreviews}
-      onEndReachedThreshold={2}
+      onEndReachedThreshold={3}
+      initialNumToRender={initialNumToRender}
+      windowSize={9}
+      maxToRenderPerBatch={platform({ios: 5, default: 1})}
+      updateCellsBatchingPeriod={40}
     />
   )
 }
diff --git a/src/screens/Search/components/ModuleHeader.tsx b/src/screens/Search/components/ModuleHeader.tsx
index cbd0a856b..c965046a6 100644
--- a/src/screens/Search/components/ModuleHeader.tsx
+++ b/src/screens/Search/components/ModuleHeader.tsx
@@ -41,6 +41,8 @@ export function Container({
         headerHeight && web({position: 'sticky', top: headerHeight}),
         style,
       ]}>
+      {/* Very non-scientific way to avoid small gap on scroll */}
+      <View style={[a.absolute, a.inset_0, t.atoms.bg, {top: -2}]} />
       {children}
     </View>
   )