defer render, put handleScrolledDownChange in non reactive callback

This commit is contained in:
Samuel Newman
2026-01-26 14:06:09 +02:00
parent 250e06c96e
commit 09779b0ade
+10 -7
View File
@@ -1,4 +1,4 @@
import React, {memo} from 'react' import {forwardRef, memo, useDeferredValue, useMemo} from 'react'
import {RefreshControl, type ViewToken} from 'react-native' import {RefreshControl, type ViewToken} from 'react-native'
import { import {
type FlatListPropsWithLayout, type FlatListPropsWithLayout,
@@ -9,6 +9,7 @@ import {
import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video' import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video'
import {useDedupe} from '#/lib/hooks/useDedupe' import {useDedupe} from '#/lib/hooks/useDedupe'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {useScrollHandlers} from '#/lib/ScrollContext' import {useScrollHandlers} from '#/lib/ScrollContext'
import {addStyle} from '#/lib/styles' import {addStyle} from '#/lib/styles'
import {useLightbox} from '#/state/lightbox' import {useLightbox} from '#/state/lightbox'
@@ -43,7 +44,7 @@ export type ListRef = React.RefObject<FlatList_INTERNAL | null>
const SCROLLED_DOWN_LIMIT = 200 const SCROLLED_DOWN_LIMIT = 200
let List = React.forwardRef<ListMethods, ListProps>( let List = forwardRef<ListMethods, ListProps>(
( (
{ {
onScrolledDownChange, onScrolledDownChange,
@@ -63,9 +64,11 @@ let List = React.forwardRef<ListMethods, ListProps>(
const dedupe = useDedupe(400) const dedupe = useDedupe(400)
const scrollsToTop = useAllowScrollToTop() const scrollsToTop = useAllowScrollToTop()
function handleScrolledDownChange(didScrollDown: boolean) { const handleScrolledDownChange = useNonReactiveCallback(
onScrolledDownChange?.(didScrollDown) (didScrollDown: boolean) => {
} onScrolledDownChange?.(didScrollDown)
},
)
// Intentionally destructured outside the main thread closure. // Intentionally destructured outside the main thread closure.
// See https://github.com/bluesky-social/social-app/pull/4108. // See https://github.com/bluesky-social/social-app/pull/4108.
@@ -106,7 +109,7 @@ let List = React.forwardRef<ListMethods, ListProps>(
}, },
}) })
const [onViewableItemsChanged, viewabilityConfig] = React.useMemo(() => { const [onViewableItemsChanged, viewabilityConfig] = useMemo(() => {
if (!onItemSeen) { if (!onItemSeen) {
return [undefined, undefined] return [undefined, undefined]
} }
@@ -187,5 +190,5 @@ export {List}
const useAllowScrollToTop = IS_IOS ? useAllowScrollToTopIOS : () => undefined const useAllowScrollToTop = IS_IOS ? useAllowScrollToTopIOS : () => undefined
function useAllowScrollToTopIOS() { function useAllowScrollToTopIOS() {
const {activeLightbox} = useLightbox() const {activeLightbox} = useLightbox()
return !activeLightbox return useDeferredValue(!activeLightbox)
} }