From 287a608e975711c9dcc9106619a71e84097ac51a Mon Sep 17 00:00:00 2001
From: Developer <dev@bilibili-app.local>
Date: Wed, 11 Mar 2026 14:42:47 +0800
Subject: [PATCH] refactor: memoize renderItem, document viewability ref
 pattern, remove redundant assertion

---
 app/index.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index 3bb12a5..67affe5 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useMemo } from "react";
+import React, { useEffect, useState, useRef, useMemo, useCallback } from "react";
 import {
   View,
   StyleSheet,
@@ -39,6 +39,7 @@ export default function HomeScreen() {
   const [visibleBigKey, setVisibleBigKey] = useState<string | null>(null);
   const rows = useMemo(() => toListRows(videos), [videos]);
 
+  // useRef-wrapped to satisfy FlatList's requirement that onViewableItemsChanged never changes identity after mount
   const onViewableItemsChangedRef = useRef(
     ({ viewableItems }: { viewableItems: ViewToken[] }) => {
       const bigRow = viewableItems.find(
@@ -61,7 +62,7 @@ export default function HomeScreen() {
     load();
   }, []);
 
-  const renderItem = ({ item: row }: { item: ListRow }) => {
+  const renderItem = useCallback(({ item: row }: { item: ListRow }) => {
     if (row.type === 'big') {
       return (
         <BigVideoCard
@@ -72,6 +73,7 @@ export default function HomeScreen() {
       );
     }
     // Normal pair row
+    const right = row.right;
     return (
       <View style={styles.row}>
         <View style={styles.leftCol}>
@@ -80,17 +82,17 @@ export default function HomeScreen() {
             onPress={() => router.push(`/video/${row.left.bvid}` as any)}
           />
         </View>
-        {row.right && (
+        {right && (
           <View style={styles.rightCol}>
             <VideoCard
-              item={row.right}
-              onPress={() => router.push(`/video/${row.right!.bvid}` as any)}
+              item={right}
+              onPress={() => router.push(`/video/${right.bvid}` as any)}
             />
           </View>
         )}
       </View>
     );
-  };
+  }, [visibleBigKey]);
 
   return (
     <SafeAreaView style={styles.safe} edges={["left", "right"]}>