perf: optimize performance in dev mode

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/src/lib/navigation/WrappedScreenItem.tsx

@@ -3,7 +3,7 @@ import type { PrimitiveAtom } from "jotai"
 import { atom, useAtomValue, useSetAtom } from "jotai"
 import type { FC, ReactNode } from "react"
 import { memo, useCallback, useContext, useMemo, useRef } from "react"
-import type { NativeSyntheticEvent } from "react-native"
+import type { NativeSyntheticEvent, StyleProp, ViewStyle } from "react-native"
 import { StyleSheet, View } from "react-native"
 import { useSharedValue } from "react-native-reanimated"
 import type { ScreenStackHeaderConfigProps, StackPresentationTypes } from "react-native-screens"
@@ -33,6 +33,7 @@ export const WrappedScreenItem: FC<
 
     headerConfig?: ScreenStackHeaderConfigProps
     screenOptions?: NavigationControllerViewExtraProps
+    style?: StyleProp<ViewStyle>
   } & ScreenOptionsContextType
 > = memo(
   ({
@@ -41,6 +42,7 @@ export const WrappedScreenItem: FC<
     stackPresentation,
     headerConfig,
     screenOptions: screenOptionsProp,
+    style,
     ...rest
   }) => {
     const navigation = useNavigation()
@@ -143,6 +145,7 @@ export const WrappedScreenItem: FC<
             style={[
               StyleSheet.absoluteFill,
               { backgroundColor: screenOptionsProp?.transparent ? undefined : backgroundColor },
+              style,
             ]}
             {...rest}
             {...mergedScreenOptions}

apps/mobile/src/lib/navigation/bottom-tab/TabScreen.ios.tsx

@@ -95,15 +95,15 @@ export const TabScreen: FC<PropsWithChildren<Omit<TabScreenProps, "tabScreenInde
   )
   const shouldLoadReact = mergedProps.lazy ? isSelected || isLoadedBefore : true
 
+  const optimize = __DEV__ && isSelected
   return (
     <TabScreenNative style={StyleSheet.absoluteFill}>
       <TabScreenContext.Provider value={ctxValue}>
-        {shouldLoadReact && (
+        {shouldLoadReact && optimize && (
           <WrappedScreenItem screenId={`tab-screen-${tabScreenIndex}`}>
             {children}
             <ScreenNameRegister />
             <LifecycleEvents isSelected={isSelected} />
-            {/* <CalculateTabBarOpacity /> */}
           </WrappedScreenItem>
         )}
       </TabScreenContext.Provider>

apps/mobile/src/modules/context-menu/feeds.tsx

@@ -328,7 +328,7 @@ const PreviewFeeds = (props: { id: string; view: FeedViewType }) => {
     ({ item: id }: ListRenderItemInfo<string>) => (
       <EntryNormalItem entryId={id} extraData="" view={props.view} />
     ),
-    [],
+    [props.view],
   )
   return (
     <View className="bg-system-background size-full flex-1">

apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx

@@ -1,7 +1,7 @@
 import type { FeedViewType } from "@follow/constants"
 import type { ListRenderItemInfo } from "@shopify/flash-list"
 import type { ElementRef } from "react"
-import { forwardRef, useCallback, useMemo } from "react"
+import { forwardRef, useCallback, useImperativeHandle, useMemo } from "react"
 import { View } from "react-native"
 
 import { usePlayingUrl } from "@/src/lib/player"
@@ -10,14 +10,14 @@ import { usePrefetchEntryTranslation } from "@/src/store/translation/hooks"
 import { useFetchEntriesControls } from "../screen/atoms"
 import { TimelineSelectorList } from "../screen/TimelineSelectorList"
 import { EntryListFooter } from "./EntryListFooter"
-import { useOnViewableItemsChanged } from "./hooks"
+import { useOnViewableItemsChanged, usePagerListPerformanceHack } from "./hooks"
 import { ItemSeparator } from "./ItemSeparator"
 import { EntryNormalItem } from "./templates/EntryNormalItem"
 
 export const EntryListContentArticle = forwardRef<
   ElementRef<typeof TimelineSelectorList>,
   { entryIds: string[] | null; active?: boolean; view: FeedViewType }
->(({ entryIds, active, view }, ref) => {
+>(({ entryIds, active, view }, forwardRef) => {
   const playingAudioUrl = usePlayingUrl()
 
   const { fetchNextPage, isFetching, refetch, isRefetching, hasNextPage } =
@@ -35,10 +35,15 @@ export const EntryListContentArticle = forwardRef<
     [hasNextPage],
   )
 
+  const { onScroll: hackOnScroll, ref, style: hackStyle } = usePagerListPerformanceHack()
+
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    onScroll: hackOnScroll,
   })
 
+  useImperativeHandle(forwardRef, () => ref.current!)
+
   usePrefetchEntryTranslation(active ? viewableItems.map((item) => item.key) : [])
 
   return (
@@ -48,18 +53,21 @@ export const EntryListContentArticle = forwardRef<
       isRefetching={isRefetching}
       data={entryIds}
       extraData={playingAudioUrl}
-      keyExtractor={(id) => id}
+      keyExtractor={defaultKeyExtractor}
       estimatedItemSize={100}
       renderItem={renderItem}
       onEndReached={fetchNextPage}
       onScroll={onScroll}
       onViewableItemsChanged={onViewableItemsChanged}
       ItemSeparatorComponent={ItemSeparator}
       ListFooterComponent={ListFooterComponent}
+      style={hackStyle}
     />
   )
 })
 
+const defaultKeyExtractor = (id: string) => id
+
 export function EntryItemSkeleton() {
   return (
     <View className="bg-system-background flex flex-row items-center p-4">

apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx

@@ -1,7 +1,7 @@
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import type { MasonryFlashListProps } from "@shopify/flash-list"
 import type { ElementRef } from "react"
-import { forwardRef } from "react"
+import { forwardRef, useImperativeHandle } from "react"
 import { View } from "react-native"
 
 import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
@@ -10,7 +10,7 @@ import { usePrefetchEntryTranslation } from "@/src/store/translation/hooks"
 
 import { TimelineSelectorMasonryList } from "../screen/TimelineSelectorList"
 import { GridEntryListFooter } from "./EntryListFooter"
-import { useOnViewableItemsChanged } from "./hooks"
+import { useOnViewableItemsChanged, usePagerListPerformanceHack } from "./hooks"
 // import type { MasonryItem } from "./templates/EntryGridItem"
 import { EntryPictureItem } from "./templates/EntryPictureItem"
 
@@ -20,11 +20,14 @@ export const EntryListContentPicture = forwardRef<
     MasonryFlashListProps<string>,
     "data" | "renderItem"
   >
->(({ entryIds, active, ...rest }, ref) => {
+>(({ entryIds, active, ...rest }, forwardRef) => {
+  const { onScroll: hackOnScroll, ref, style: hackStyle } = usePagerListPerformanceHack()
+  useImperativeHandle(forwardRef, () => ref.current!)
   const { fetchNextPage, refetch, isRefetching, hasNextPage, isFetching } =
     useFetchEntriesControls()
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    onScroll: hackOnScroll,
   })
 
   usePrefetchEntryTranslation(active ? viewableItems.map((item) => item.key) : [])
@@ -42,6 +45,7 @@ export const EntryListContentPicture = forwardRef<
       onScroll={onScroll}
       onEndReached={fetchNextPage}
       numColumns={2}
+      style={hackStyle}
       estimatedItemSize={100}
       ListFooterComponent={
         hasNextPage ? (

apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx

@@ -1,24 +1,27 @@
 import type { ListRenderItemInfo } from "@shopify/flash-list"
 import type { ElementRef } from "react"
-import { forwardRef, useCallback, useMemo } from "react"
+import { forwardRef, useCallback, useImperativeHandle, useMemo } from "react"
 import { View } from "react-native"
 
 import { usePrefetchEntryTranslation } from "@/src/store/translation/hooks"
 
 import { useFetchEntriesControls } from "../screen/atoms"
 import { TimelineSelectorList } from "../screen/TimelineSelectorList"
 import { EntryListFooter } from "./EntryListFooter"
-import { useOnViewableItemsChanged } from "./hooks"
+import { useOnViewableItemsChanged, usePagerListPerformanceHack } from "./hooks"
 import { ItemSeparatorFullWidth } from "./ItemSeparator"
 import { EntrySocialItem } from "./templates/EntrySocialItem"
 
 export const EntryListContentSocial = forwardRef<
   ElementRef<typeof TimelineSelectorList>,
   { entryIds: string[] | null; active?: boolean }
->(({ entryIds, active }, ref) => {
+>(({ entryIds, active }, forwardRef) => {
   const { fetchNextPage, isFetching, refetch, isRefetching, hasNextPage } =
     useFetchEntriesControls()
 
+  const { onScroll: hackOnScroll, ref, style: hackStyle } = usePagerListPerformanceHack()
+  useImperativeHandle(forwardRef, () => ref.current!)
+  // eslint-disable-next-line @eslint-react/hooks-extra/no-unnecessary-use-callback
   const renderItem = useCallback(
     ({ item: id }: ListRenderItemInfo<string>) => <EntrySocialItem entryId={id} />,
     [],
@@ -31,6 +34,7 @@ export const EntryListContentSocial = forwardRef<
 
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    onScroll: hackOnScroll,
   })
 
   usePrefetchEntryTranslation(active ? viewableItems.map((item) => item.key) : [])
@@ -51,6 +55,7 @@ export const EntryListContentSocial = forwardRef<
       onScroll={onScroll}
       ItemSeparatorComponent={ItemSeparatorFullWidth}
       ListFooterComponent={ListFooterComponent}
+      style={hackStyle}
     />
   )
 })

apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx

@@ -1,15 +1,15 @@
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import type { MasonryFlashListProps } from "@shopify/flash-list"
 import type { ElementRef } from "react"
-import { forwardRef, useMemo } from "react"
+import { forwardRef, useImperativeHandle, useMemo } from "react"
 import { View } from "react-native"
 
 import { useFetchEntriesControls } from "@/src/modules/screen/atoms"
 import { usePrefetchEntryTranslation } from "@/src/store/translation/hooks"
 
 import { TimelineSelectorMasonryList } from "../screen/TimelineSelectorList"
 import { GridEntryListFooter } from "./EntryListFooter"
-import { useOnViewableItemsChanged } from "./hooks"
+import { useOnViewableItemsChanged, usePagerListPerformanceHack } from "./hooks"
 import { EntryVideoItem } from "./templates/EntryVideoItem"
 
 export const EntryListContentVideo = forwardRef<
@@ -18,11 +18,14 @@ export const EntryListContentVideo = forwardRef<
     MasonryFlashListProps<string>,
     "data" | "renderItem"
   >
->(({ entryIds, active, ...rest }, ref) => {
+>(({ entryIds, active, ...rest }, forwardRef) => {
+  const { onScroll: hackOnScroll, ref, style: hackStyle } = usePagerListPerformanceHack()
+  useImperativeHandle(forwardRef, () => ref.current!)
   const { fetchNextPage, refetch, isRefetching, isFetching, hasNextPage } =
     useFetchEntriesControls()
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    onScroll: hackOnScroll,
   })
 
   usePrefetchEntryTranslation(active ? viewableItems.map((item) => item.key) : [])
@@ -57,6 +60,7 @@ export const EntryListContentVideo = forwardRef<
       ListFooterComponent={ListFooterComponent}
       {...rest}
       onRefresh={refetch}
+      style={hackStyle}
     />
   )
 })

apps/mobile/src/modules/entry-list/hooks.ts

@@ -1,18 +1,33 @@
+import type { FlashList } from "@shopify/flash-list"
 import type ViewToken from "@shopify/flash-list/dist/viewability/ViewToken"
-import { useCallback, useEffect, useInsertionEffect, useMemo, useRef, useState } from "react"
-import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
+import type { RefObject } from "react"
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useInsertionEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import type { NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle } from "react-native"
+import { useEventCallback } from "usehooks-ts"
 
 import { useGeneralSettingKey } from "@/src/atoms/settings/general"
 import { debouncedFetchEntryContentByStream } from "@/src/store/entry/store"
 import { unreadSyncService } from "@/src/store/unread/store"
 
+import { PagerListVisibleContext, PagerListWillVisibleContext } from "../screen/PagerListContext"
+
 const defaultIdExtractor = (item: ViewToken) => item.key
 export function useOnViewableItemsChanged({
   disabled,
   idExtractor = defaultIdExtractor,
+  onScroll: onScrollProp,
 }: {
   disabled?: boolean
   idExtractor?: (item: ViewToken) => string
+  onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
 } = {}) {
   const orientation = useRef<"down" | "up">("down")
   const lastOffset = useRef(0)
@@ -82,12 +97,16 @@ export function useOnViewableItemsChanged({
     stableIdExtractor,
   ])
 
-  const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const currentOffset = e.nativeEvent.contentOffset.y
-    const currentOrientation = currentOffset > lastOffset.current ? "down" : "up"
-    orientation.current = currentOrientation
-    lastOffset.current = currentOffset
-  }, [])
+  const onScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const currentOffset = e.nativeEvent.contentOffset.y
+      const currentOrientation = currentOffset > lastOffset.current ? "down" : "up"
+      orientation.current = currentOrientation
+      lastOffset.current = currentOffset
+      onScrollProp?.(e)
+    },
+    [onScrollProp],
+  )
 
   return useMemo(
     () => ({ onViewableItemsChanged, onScroll, viewableItems }),
@@ -108,3 +127,33 @@ function useNonReactiveCallback<T extends (...args: any[]) => any>(fn: T): T {
     [ref],
   ) as unknown as T
 }
+
+export const usePagerListPerformanceHack = (provideRef?: RefObject<FlashList<any>>) => {
+  const lastY = useRef(0)
+
+  const onScroll = useEventCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (!visible) return
+
+    lastY.current = e.nativeEvent.contentOffset.y
+  })
+
+  const visible = useContext(PagerListVisibleContext)
+  const willVisible = useContext(PagerListWillVisibleContext)
+
+  const nextVisible = visible || willVisible
+
+  const ref = useRef<FlashList<any>>(null)
+
+  const usingRef = provideRef ?? ref
+  const [style, setStyle] = useState<StyleProp<ViewStyle>>({})
+  useEffect(() => {
+    setStyle({ display: nextVisible ? "flex" : "none" })
+    if (nextVisible && lastY.current > 0) {
+      requestAnimationFrame(() => {
+        usingRef.current?.scrollToOffset({ offset: lastY.current, animated: false })
+      })
+    }
+  }, [nextVisible, usingRef])
+
+  return { onScroll, ref, style }
+}