Skip to content

Commit

Permalink
Adjust FlatList performance in main feeds (#3134)
Browse files Browse the repository at this point in the history
* adjust flatlist perf settings

* calculate initial num to render based on screen height

* adjust window size

* don't react to screen height changes
  • Loading branch information
haileyok authored Mar 6, 2024
1 parent 357b61d commit 8b0e575
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 0 deletions.
11 changes: 11 additions & 0 deletions src/lib/hooks/useInitialNumToRender.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'
import {Dimensions} from 'react-native'

const MIN_POST_HEIGHT = 100

export function useInitialNumToRender(minItemHeight: number = MIN_POST_HEIGHT) {
return React.useMemo(() => {
const screenHeight = Dimensions.get('window').height
return Math.ceil(screenHeight / minItemHeight) + 1
}, [minItemHeight])
}
4 changes: 4 additions & 0 deletions src/screens/Hashtag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOut
import {shareUrl} from 'lib/sharing'
import {HITSLOP_10} from 'lib/constants'
import {isNative} from 'platform/detection'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'

const renderItem = ({item}: ListRenderItemInfo<PostView>) => {
return <Post post={item} />
Expand All @@ -37,6 +38,7 @@ export default function HashtagScreen({
const {tag, author} = route.params
const setMinimalShellMode = useSetMinimalShellMode()
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTR, setIsPTR] = React.useState(false)

const fullTag = React.useMemo(() => {
Expand Down Expand Up @@ -154,6 +156,8 @@ export default function HashtagScreen({
onRetry={fetchNextPage}
/>
}
initialNumToRender={initialNumToRender}
windowSize={11}
/>
)}
</>
Expand Down
4 changes: 4 additions & 0 deletions src/view/com/posts/Feed.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'

const LOADING_ITEM = {_reactKey: '__loading__'}
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
Expand Down Expand Up @@ -84,6 +85,7 @@ let Feed = ({
const {_} = useLingui()
const queryClient = useQueryClient()
const {currentAccount} = useSession()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = React.useState(false)
const checkForNewRef = React.useRef<(() => void) | null>(null)
const lastFetchRef = React.useRef<number>(Date.now())
Expand Down Expand Up @@ -327,6 +329,8 @@ let Feed = ({
desktopFixedHeight={
desktopFixedHeightOffset ? desktopFixedHeightOffset : true
}
initialNumToRender={initialNumToRender}
windowSize={11}
/>
</View>
)
Expand Down

0 comments on commit 8b0e575

Please sign in to comment.