refactor(memory): use useRef for fetchMemories to ensure callback stability in infinite scrolling hooks

Author: YuSunjo

src/components/MemoriesPage.tsx

@@ -21,15 +21,22 @@ const MemoriesPage: React.FC<MemoriesPageProps> = ({ title, memoryType, requireA
   const { isAuthenticated } = useAuth(requireAuth);
 
   // Only fetch memories if authentication is not required or user is authenticated
-  const { memories, loading, hasMore, memoriesRef, fetchMemories, isInitialLoad } = useMemories({ 
+  const { memories, loading, hasMore, memoriesRef, fetchMemories, isInitialLoad } = useMemories({
     memoryType,
     skipFetch: requireAuth && !isAuthenticated
   });
 
+  const fetchMemoriesRef = useRef(fetchMemories);
+
   const handleCreateMemory = () => {
     navigate('/create-memory');
   };
 
+  // fetchMemories ref 업데이트
+  useEffect(() => {
+    fetchMemoriesRef.current = fetchMemories;
+  }, [fetchMemories]);
+
   // Setup intersection observer for infinite scrolling
   useEffect(() => {
     // 초기 로드 중이거나 로딩 중이면 observer 설정하지 않음
@@ -40,7 +47,7 @@ const MemoriesPage: React.FC<MemoriesPageProps> = ({ title, memoryType, requireA
         if (entries[0].isIntersecting && hasMore && !loading) {
           const currentMemories = memoriesRef.current;
           const lastMemoryId = currentMemories.length > 0 ? currentMemories[currentMemories.length - 1].id : undefined;
-          fetchMemories(lastMemoryId);
+          fetchMemoriesRef.current(lastMemoryId);
         }
       },
       { threshold: 0.9 } // Trigger when 90% of the element is visible
@@ -57,7 +64,7 @@ const MemoriesPage: React.FC<MemoriesPageProps> = ({ title, memoryType, requireA
         observerRef.current.unobserve(loadingRef.current);
       }
     };
-  }, [isInitialLoad, hasMore, loading, fetchMemories]);
+  }, [isInitialLoad, hasMore, loading]);
 
   return (
     <Container maxW="container.lg" centerContent flex="1" py={8}>

src/components/PublicMemoriesPage.tsx

@@ -24,10 +24,17 @@ const PublicMemoriesPage: React.FC<PublicMemoriesPageProps> = ({ title, requireA
     skipFetch: requireAuth && !isAuthenticated
   });
 
+  const fetchMemoriesRef = useRef(fetchMemories);
+
   const handleCreateMemory = () => {
     navigate('/create-memory');
   };
 
+  // fetchMemories ref 업데이트
+  useEffect(() => {
+    fetchMemoriesRef.current = fetchMemories;
+  }, [fetchMemories]);
+
   // Setup intersection observer for infinite scrolling
   useEffect(() => {
     // 초기 로드 중이거나 로딩 중이면 observer 설정하지 않음
@@ -38,7 +45,7 @@ const PublicMemoriesPage: React.FC<PublicMemoriesPageProps> = ({ title, requireA
         if (entries[0].isIntersecting && hasMore && !loading) {
           const currentMemories = memoriesRef.current;
           const lastMemoryId = currentMemories.length > 0 ? currentMemories[currentMemories.length - 1].id : undefined;
-          fetchMemories(lastMemoryId);
+          fetchMemoriesRef.current(lastMemoryId);
         }
       },
       { threshold: 0.9 } // Trigger when 90% of the element is visible
@@ -55,7 +62,7 @@ const PublicMemoriesPage: React.FC<PublicMemoriesPageProps> = ({ title, requireA
         observerRef.current.unobserve(loadingRef.current);
       }
     };
-  }, [isInitialLoad, hasMore, loading, fetchMemories]);
+  }, [isInitialLoad, hasMore, loading]);
 
   return (
     <Container maxW="container.lg" centerContent flex="1" py={8}>