fix(mobile): onViewableItemsChanged is not reactive (#2911)

RSSNext · Feb 28, 2025 · 30aef70 · 30aef70
1 parent ab27ab8
commit 30aef70
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 47 deletions.
diff --git a/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx b/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx
@@ -31,9 +31,7 @@ export const EntryListContentArticle = forwardRef<
     [isFetching],
   )
 
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
-    disabled: isRefetching,
-  })
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
 
   return (
     <TimelineSelectorList

diff --git a/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx b/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx
@@ -18,9 +18,7 @@ export const EntryListContentPicture = forwardRef<
   } & Omit<MasonryFlashListProps<string>, "data" | "renderItem">
 >(({ entryIds, ...rest }, ref) => {
   const { fetchNextPage, refetch, isRefetching, hasNextPage } = useFetchEntriesControls()
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
-    disabled: isRefetching,
-  })
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
 
   return (
     <TimelineSelectorMasonryList

diff --git a/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx b/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx
@@ -25,9 +25,7 @@ export const EntryListContentSocial = forwardRef<
     [isFetching],
   )
 
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
-    disabled: isRefetching,
-  })
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
 
   return (
     <TimelineSelectorList

diff --git a/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx b/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx
@@ -17,9 +17,7 @@ export const EntryListContentVideo = forwardRef<
   } & Omit<MasonryFlashListProps<string>, "data" | "renderItem">
 >(({ entryIds, ...rest }, ref) => {
   const { fetchNextPage, refetch, isRefetching, isFetching } = useFetchEntriesControls()
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
-    disabled: isRefetching,
-  })
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
 
   const ListFooterComponent = useMemo(
     () =>

diff --git a/apps/mobile/src/modules/entry-list/hooks.ts b/apps/mobile/src/modules/entry-list/hooks.ts
@@ -1,5 +1,5 @@
 import type ViewToken from "@shopify/flash-list/dist/viewability/ViewToken"
-import { useMemo, useRef, useState } from "react"
+import { useCallback, useInsertionEffect, useMemo, useRef, useState } from "react"
 import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
 
 import { useGeneralSettingKey } from "@/src/atoms/settings/general"
@@ -9,14 +9,9 @@ import { unreadSyncService } from "@/src/store/unread/store"
 const defaultIdExtractor = (item: ViewToken) => item.key
 export function useOnViewableItemsChanged({
   idExtractor = defaultIdExtractor,
-  disabled,
 }: {
-  disabled?: boolean
   idExtractor?: (item: ViewToken) => string
-} = {}): {
-  onViewableItemsChanged: (info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => void
-  onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
-} {
+} = {}) {
   const orientation = useRef<"down" | "up">("down")
   const lastOffset = useRef(0)
 
@@ -25,32 +20,47 @@ export function useOnViewableItemsChanged({
 
   const [stableIdExtractor] = useState(() => idExtractor)
 
-  return useMemo(() => {
-    return {
-      onViewableItemsChanged: ({ viewableItems, changed }) => {
-        if (disabled) return
-
-        debouncedFetchEntryContentByStream(viewableItems.map((item) => stableIdExtractor(item)))
-        if (markAsReadWhenScrolling && orientation.current === "down") {
-          changed
-            .filter((item) => !item.isViewable)
-            .forEach((item) => {
-              unreadSyncService.markEntryAsRead(stableIdExtractor(item))
-            })
-        }
-
-        if (markAsReadWhenRendering && orientation.current === "down") {
-          viewableItems.forEach((item) => {
-            unreadSyncService.markEntryAsRead(stableIdExtractor(item))
-          })
-        }
-      },
-      onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-        const currentOffset = e.nativeEvent.contentOffset.y
-        const currentOrientation = currentOffset > lastOffset.current ? "down" : "up"
-        orientation.current = currentOrientation
-        lastOffset.current = currentOffset
-      },
+  const onViewableItemsChanged: (info: {
+    viewableItems: ViewToken[]
+    changed: ViewToken[]
+  }) => void = useNonReactiveCallback(({ viewableItems, changed }) => {
+    debouncedFetchEntryContentByStream(viewableItems.map((item) => stableIdExtractor(item)))
+
+    if (markAsReadWhenScrolling && orientation.current === "down") {
+      changed
+        .filter((item) => !item.isViewable)
+        .forEach((item) => {
+          unreadSyncService.markEntryAsRead(stableIdExtractor(item))
+        })
+    }
+
+    if (markAsReadWhenRendering && orientation.current === "down") {
+      viewableItems.forEach((item) => {
+        unreadSyncService.markEntryAsRead(stableIdExtractor(item))
+      })
     }
-  }, [disabled, markAsReadWhenRendering, markAsReadWhenScrolling, orientation, 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
+  }, [])
+
+  return useMemo(() => ({ onViewableItemsChanged, onScroll }), [onScroll, onViewableItemsChanged])
+}
+
+function useNonReactiveCallback<T extends (...args: any[]) => any>(fn: T): T {
+  const ref = useRef(fn)
+  useInsertionEffect(() => {
+    ref.current = fn
+  }, [fn])
+  return useCallback(
+    (...args: any) => {
+      const latestFn = ref.current
+      return latestFn(...args)
+    },
+    [ref],
+  ) as unknown as T
 }
diff --git a/apps/mobile/src/store/unread/store.ts b/apps/mobile/src/store/unread/store.ts
@@ -62,7 +62,7 @@ class UnreadSyncService {
 
   async markEntryAsRead(entryId: string) {
     const entry = getEntry(entryId)
-    if (entry?.read) return
+    if (!entry || entry?.read) return
 
     const feedId = entry?.feedId