Adjust FlatList performance in main feeds (#3134)

* adjust flatlist perf settings

* calculate initial num to render based on screen height

* adjust window size

* don't react to screen height changes
zio/stable
Hailey 2024-03-06 15:33:23 -08:00 committed by GitHub
parent 357b61d0a5
commit 8b0e575f64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 0 deletions

View File

@ -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])
}

View File

@ -22,6 +22,7 @@ import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOut
import {shareUrl} from 'lib/sharing' import {shareUrl} from 'lib/sharing'
import {HITSLOP_10} from 'lib/constants' import {HITSLOP_10} from 'lib/constants'
import {isNative} from 'platform/detection' import {isNative} from 'platform/detection'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
const renderItem = ({item}: ListRenderItemInfo<PostView>) => { const renderItem = ({item}: ListRenderItemInfo<PostView>) => {
return <Post post={item} /> return <Post post={item} />
@ -37,6 +38,7 @@ export default function HashtagScreen({
const {tag, author} = route.params const {tag, author} = route.params
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const {_} = useLingui() const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTR, setIsPTR] = React.useState(false) const [isPTR, setIsPTR] = React.useState(false)
const fullTag = React.useMemo(() => { const fullTag = React.useMemo(() => {
@ -154,6 +156,8 @@ export default function HashtagScreen({
onRetry={fetchNextPage} onRetry={fetchNextPage}
/> />
} }
initialNumToRender={initialNumToRender}
windowSize={11}
/> />
)} )}
</> </>

View File

@ -32,6 +32,7 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {DiscoverFallbackHeader} from './DiscoverFallbackHeader' import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home' import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
const LOADING_ITEM = {_reactKey: '__loading__'} const LOADING_ITEM = {_reactKey: '__loading__'}
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
@ -84,6 +85,7 @@ let Feed = ({
const {_} = useLingui() const {_} = useLingui()
const queryClient = useQueryClient() const queryClient = useQueryClient()
const {currentAccount} = useSession() const {currentAccount} = useSession()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = React.useState(false) const [isPTRing, setIsPTRing] = React.useState(false)
const checkForNewRef = React.useRef<(() => void) | null>(null) const checkForNewRef = React.useRef<(() => void) | null>(null)
const lastFetchRef = React.useRef<number>(Date.now()) const lastFetchRef = React.useRef<number>(Date.now())
@ -327,6 +329,8 @@ let Feed = ({
desktopFixedHeight={ desktopFixedHeight={
desktopFixedHeightOffset ? desktopFixedHeightOffset : true desktopFixedHeightOffset ? desktopFixedHeightOffset : true
} }
initialNumToRender={initialNumToRender}
windowSize={11}
/> />
</View> </View>
) )