diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 480e1fc5..0e5335b1 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -1,6 +1,6 @@
 import { Button, Tooltip } from "@mui/joy";
 import { ClientError } from "nice-grpc-web";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import Empty from "@/components/Empty";
@@ -24,24 +24,19 @@ const Archived = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const nextPageTokenRef = useRef<string | undefined>(undefined);
+  const [nextPageToken, setNextPageToken] = useState<string>("");
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value
     .filter((memo) => memo.rowStatus === RowStatus.ARCHIVED)
     .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
 
   useEffect(() => {
-    setIsRequesting(true);
-    nextPageTokenRef.current = undefined;
-    setTimeout(async () => {
-      memoList.reset();
-      const nextPageToken = await fetchMemos();
-      nextPageTokenRef.current = nextPageToken;
-      setIsRequesting(false);
-    });
+    memoList.reset();
+    fetchMemos("");
   }, [tagQuery, textQuery]);
 
-  const fetchMemos = async () => {
+  const fetchMemos = async (nextPageToken: string) => {
+    setIsRequesting(true);
     const filters = [`creator == "${user.name}"`, `row_status == "ARCHIVED"`];
     const contentSearch: string[] = [];
     if (textQuery) {
@@ -53,12 +48,13 @@ const Archived = () => {
     if (tagQuery) {
       filters.push(`tag == "${tagQuery}"`);
     }
-    const { nextPageToken } = await memoStore.fetchMemos({
+    const response = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
-      pageToken: nextPageTokenRef.current,
+      pageToken: nextPageToken,
     });
-    return nextPageToken;
+    setIsRequesting(false);
+    setNextPageToken(response.nextPageToken);
   };
 
   const handleDeleteMemoClick = async (memo: Memo) => {
@@ -136,7 +132,7 @@ const Archived = () => {
               <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
               <p className="text-sm italic">{t("memo.fetching-data")}</p>
             </div>
-          ) : !nextPageTokenRef.current ? (
+          ) : !nextPageToken ? (
             sortedMemos.length === 0 && (
               <div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
                 <Empty />
@@ -145,7 +141,7 @@ const Archived = () => {
             )
           ) : (
             <div className="w-full flex flex-row justify-center items-center my-4">
-              <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
+              <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
                 {t("memo.fetch-more")}
               </Button>
             </div>
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 15ed50b9..a36b7810 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@mui/joy";
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import Empty from "@/components/Empty";
 import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
 import Icon from "@/components/Icon";
@@ -22,22 +22,17 @@ const Explore = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const nextPageTokenRef = useRef<string | undefined>(undefined);
+  const [nextPageToken, setNextPageToken] = useState<string>("");
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
 
   useEffect(() => {
-    setIsRequesting(true);
-    nextPageTokenRef.current = undefined;
-    setTimeout(async () => {
-      memoList.reset();
-      const nextPageToken = await fetchMemos();
-      nextPageTokenRef.current = nextPageToken;
-      setIsRequesting(false);
-    });
+    memoList.reset();
+    fetchMemos("");
   }, [tagQuery, textQuery]);
 
-  const fetchMemos = async () => {
+  const fetchMemos = async (nextPageToken: string) => {
+    setIsRequesting(true);
     const filters = [`row_status == "NORMAL"`, `visibilities == [${user ? "'PUBLIC', 'PROTECTED'" : "'PUBLIC'"}]`];
     const contentSearch: string[] = [];
     if (textQuery) {
@@ -49,12 +44,13 @@ const Explore = () => {
     if (tagQuery) {
       filters.push(`tag == "${tagQuery}"`);
     }
-    const { nextPageToken } = await memoStore.fetchMemos({
+    const response = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
-      pageToken: nextPageTokenRef.current,
+      pageToken: nextPageToken,
     });
-    return nextPageToken;
+    setIsRequesting(false);
+    setNextPageToken(response.nextPageToken);
   };
 
   return (
@@ -76,7 +72,7 @@ const Explore = () => {
                 <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
                 <p className="text-sm italic">{t("memo.fetching-data")}</p>
               </div>
-            ) : !nextPageTokenRef.current ? (
+            ) : !nextPageToken ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                   <Empty />
@@ -85,7 +81,7 @@ const Explore = () => {
               )
             ) : (
               <div className="w-full flex flex-row justify-center items-center my-4">
-                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
+                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
                   {t("memo.fetch-more")}
                 </Button>
               </div>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index e991d66d..e71ade3e 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@mui/joy";
 import clsx from "clsx";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Empty from "@/components/Empty";
 import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
 import Icon from "@/components/Icon";
@@ -25,7 +25,7 @@ const Home = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const nextPageTokenRef = useRef<string | undefined>(undefined);
+  const [nextPageToken, setNextPageToken] = useState<string>("");
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value
     .filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
@@ -33,17 +33,12 @@ const Home = () => {
     .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
-    setIsRequesting(true);
-    nextPageTokenRef.current = undefined;
-    setTimeout(async () => {
-      memoList.reset();
-      const nextPageToken = await fetchMemos();
-      nextPageTokenRef.current = nextPageToken;
-      setIsRequesting(false);
-    });
+    memoList.reset();
+    fetchMemos("");
   }, [tagQuery, textQuery]);
 
-  const fetchMemos = async () => {
+  const fetchMemos = async (nextPageToken: string) => {
+    setIsRequesting(true);
     const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
     const contentSearch: string[] = [];
     if (textQuery) {
@@ -55,12 +50,13 @@ const Home = () => {
     if (tagQuery) {
       filters.push(`tag == "${tagQuery}"`);
     }
-    const { nextPageToken } = await memoStore.fetchMemos({
+    const response = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
-      pageToken: nextPageTokenRef.current,
+      pageToken: nextPageToken,
     });
-    return nextPageToken;
+    setIsRequesting(false);
+    setNextPageToken(response.nextPageToken);
   };
 
   const handleEditPrevious = useCallback(() => {
@@ -91,7 +87,7 @@ const Home = () => {
                 <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
                 <p className="text-sm italic">{t("memo.fetching-data")}</p>
               </div>
-            ) : !nextPageTokenRef.current ? (
+            ) : !nextPageToken ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                   <Empty />
@@ -100,7 +96,7 @@ const Home = () => {
               )
             ) : (
               <div className="w-full flex flex-row justify-center items-center my-4">
-                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
+                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
                   {t("memo.fetch-more")}
                 </Button>
               </div>
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx
index 0c0fd655..632ec7be 100644
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@@ -1,7 +1,7 @@
 import { Button, IconButton } from "@mui/joy";
 import clsx from "clsx";
 import dayjs from "dayjs";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import ActivityCalendar from "@/components/ActivityCalendar";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
@@ -30,19 +30,13 @@ const Timeline = () => {
   const [activityStats, setActivityStats] = useState<Record<string, number>>({});
   const [selectedDateString, setSelectedDateString] = useState<string>(new Date().toDateString());
   const [isRequesting, setIsRequesting] = useState(true);
-  const nextPageTokenRef = useRef<string | undefined>(undefined);
+  const [nextPageToken, setNextPageToken] = useState<string>("");
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.displayTime) - getTimeStampByDate(b.displayTime));
   const monthString = dayjs(selectedDateString).format("YYYY-MM");
 
   useEffect(() => {
-    setIsRequesting(true);
-    nextPageTokenRef.current = undefined;
-    setTimeout(async () => {
-      memoList.reset();
-      const nextPageToken = await fetchMemos();
-      nextPageTokenRef.current = nextPageToken;
-      setIsRequesting(false);
-    });
+    memoList.reset();
+    fetchMemos("");
   }, [selectedDateString, tagQuery, textQuery]);
 
   useEffect(() => {
@@ -74,7 +68,8 @@ const Timeline = () => {
     })();
   }, [sortedMemos.length]);
 
-  const fetchMemos = async () => {
+  const fetchMemos = async (nextPageToken: string) => {
+    setIsRequesting(true);
     const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
     const contentSearch: string[] = [];
     if (textQuery) {
@@ -92,12 +87,13 @@ const Timeline = () => {
         ...[`display_time_after == ${selectedDateStamp / 1000}`, `display_time_before == ${(selectedDateStamp + DAILY_TIMESTAMP) / 1000}`],
       );
     }
-    const { nextPageToken } = await memoStore.fetchMemos({
+    const response = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
-      pageToken: nextPageTokenRef.current,
+      pageToken: nextPageToken,
     });
-    return nextPageToken;
+    setIsRequesting(false);
+    setNextPageToken(response.nextPageToken);
   };
 
   const handleSelectedDataChange = (date: string) => {
@@ -192,7 +188,7 @@ const Timeline = () => {
                   <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
                   <p className="text-sm italic">{t("memo.fetching-data")}</p>
                 </div>
-              ) : !nextPageTokenRef.current ? (
+              ) : !nextPageToken ? (
                 sortedMemos.length === 0 && (
                   <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                     <Empty />
@@ -201,7 +197,11 @@ const Timeline = () => {
                 )
               ) : (
                 <div className="w-full flex flex-row justify-center items-center my-4">
-                  <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
+                  <Button
+                    variant="plain"
+                    endDecorator={<Icon.ArrowDown className="w-5 h-auto" />}
+                    onClick={() => fetchMemos(nextPageToken)}
+                  >
                     {t("memo.fetch-more")}
                   </Button>
                 </div>
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 7a4ad7f0..52e88a09 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@mui/joy";
 import copy from "copy-to-clipboard";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
@@ -26,7 +26,7 @@ const UserProfile = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const nextPageTokenRef = useRef<string | undefined>(undefined);
+  const [nextPageToken, setNextPageToken] = useState<string>("");
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value
     .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
@@ -59,21 +59,16 @@ const UserProfile = () => {
       return;
     }
 
-    setIsRequesting(true);
-    nextPageTokenRef.current = undefined;
-    setTimeout(async () => {
-      memoList.reset();
-      const nextPageToken = await fetchMemos();
-      nextPageTokenRef.current = nextPageToken;
-      setIsRequesting(false);
-    });
+    memoList.reset();
+    fetchMemos("");
   }, [user, tagQuery, textQuery]);
 
-  const fetchMemos = async () => {
+  const fetchMemos = async (nextPageToken: string) => {
     if (!user) {
       return;
     }
 
+    setIsRequesting(true);
     const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
     const contentSearch: string[] = [];
     if (textQuery) {
@@ -85,12 +80,13 @@ const UserProfile = () => {
     if (tagQuery) {
       filters.push(`tag == "${tagQuery}"`);
     }
-    const { nextPageToken } = await memoStore.fetchMemos({
+    const response = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
-      pageToken: nextPageTokenRef.current,
+      pageToken: nextPageToken,
     });
-    return nextPageToken;
+    setIsRequesting(false);
+    setNextPageToken(response.nextPageToken);
   };
 
   const handleCopyProfileLink = () => {
@@ -144,7 +140,7 @@ const UserProfile = () => {
                   <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
                   <p className="text-sm italic">{t("memo.fetching-data")}</p>
                 </div>
-              ) : !nextPageTokenRef.current ? (
+              ) : !nextPageToken ? (
                 sortedMemos.length === 0 && (
                   <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                     <Empty />
@@ -153,7 +149,11 @@ const UserProfile = () => {
                 )
               ) : (
                 <div className="w-full flex flex-row justify-center items-center my-4">
-                  <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
+                  <Button
+                    variant="plain"
+                    endDecorator={<Icon.ArrowDown className="w-5 h-auto" />}
+                    onClick={() => fetchMemos(nextPageToken)}
+                  >
                     {t("memo.fetch-more")}
                   </Button>
                 </div>