コンポーネント内の関数で使用する値をuseRefに変更

MurakawaTakuya · Jan 16, 2025 · 7023009 · 7023009
1 parent 4198f0d
commit 7023009
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 36 deletions.
diff --git a/functions/src/routers/resultRouter.ts b/functions/src/routers/resultRouter.ts
@@ -66,7 +66,11 @@ const getResults = async (
       .sort((a, b) => a.toDate().getTime() - b.toDate().getTime())[0];
 
     if (!earliestSubmittedAt) {
-      return;
+      return {
+        successResults,
+        failedResults,
+        pendingResults,
+      };
     }
 
     const failedSnapshot = await baseQuery

diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
@@ -37,14 +37,10 @@ export default function DashBoard({
     setPendingResults,
     lastPostDate,
     setLastPostDate,
-    noMorePending,
-    setNoMorePending,
-    noMoreFinished,
-    setNoMoreFinished,
     pendingOffset,
-    setPendingOffset,
     finishedOffset,
-    setFinishedOffset,
+    noMorePending,
+    noMoreFinished,
   } = useResults();
   const [noResult, setNoResult] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -69,13 +65,21 @@ export default function DashBoard({
     if (reachedBottom && !isLoadingMore) {
       setIsLoadingMore(true);
     }
+    // 全て読み込んだ場合
+    if (
+      (pending && noMorePending.current) ||
+      (success && failed && noMoreFinished.current)
+    ) {
+      setIsLoading(false);
+      return;
+    }
 
     fetchResult({
       userId,
       success,
       failed,
       pending,
-      offset: pending ? pendingOffset : finishedOffset,
+      offset: pending ? pendingOffset.current : finishedOffset.current,
       limit,
     })
       .then((data) => {
@@ -103,21 +107,21 @@ export default function DashBoard({
         });
 
         if (pending) {
-          setPendingOffset(pendingOffset + limit);
+          pendingOffset.current += limit;
         } else {
-          setFinishedOffset(finishedOffset + limit);
+          pendingOffset.current += limit;
         }
 
         // 全部のデータを読み取った場合
         if (pending && data.pendingResults.length < limit) {
-          setNoMorePending(true);
+          noMorePending.current = true;
         }
         if (
           success &&
           failed &&
           data.successResults.length + data.failedResults.length < limit
         ) {
-          setNoMoreFinished(true);
+          noMoreFinished.current = true;
         }
 
         setIsLoading(false);
@@ -144,8 +148,8 @@ export default function DashBoard({
           if (
             entries[0].isIntersecting &&
             !isLoading &&
-            ((pending && !noMorePending) ||
-              (success && failed && !noMoreFinished))
+            ((pending && !noMorePending.current) ||
+              (success && failed && !noMoreFinished.current))
           ) {
             setReachedBottom(true);
             fetchData();
@@ -164,7 +168,13 @@ export default function DashBoard({
         }
       };
     }, 1000);
-  }, [isLoading, noMorePending, noMoreFinished, bottomRef.current, bottomRef]);
+  }, [
+    isLoading,
+    noMorePending.current,
+    noMoreFinished.current,
+    bottomRef.current,
+    bottomRef,
+  ]);
 
   useEffect(() => {
     if (
@@ -251,8 +261,8 @@ export default function DashBoard({
           <div className="bottom" ref={bottomRef}></div>
 
           {/* 下に到達した時に続きを表示 */}
-          {((pending && !noMorePending) ||
-            (success && failed && !noMoreFinished)) &&
+          {((pending && !noMorePending.current) ||
+            (success && failed && !noMoreFinished.current)) &&
             (reachedBottom ? (
               <div
                 style={{

diff --git a/src/utils/ResultContext.tsx b/src/utils/ResultContext.tsx
@@ -1,6 +1,12 @@
 "use client";
 import { GoalWithIdAndUserData, Post } from "@/types/types";
-import React, { createContext, ReactNode, useContext, useState } from "react";
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useRef,
+  useState,
+} from "react";
 
 interface ResultContextType {
   successResults: GoalWithIdAndUserData[];
@@ -17,14 +23,10 @@ interface ResultContextType {
   >;
   lastPostDate: string | null;
   setLastPostDate: React.Dispatch<string | null>;
-  noMorePending: boolean;
-  setNoMorePending: React.Dispatch<boolean>;
-  noMoreFinished: boolean;
-  setNoMoreFinished: React.Dispatch<boolean>;
-  pendingOffset: number;
-  setPendingOffset: React.Dispatch<number>;
-  finishedOffset: number;
-  setFinishedOffset: React.Dispatch<number>;
+  pendingOffset: React.RefObject<number>;
+  finishedOffset: React.RefObject<number>;
+  noMorePending: React.RefObject<boolean>;
+  noMoreFinished: React.RefObject<boolean>;
 }
 
 const ResultContext = createContext<ResultContextType | undefined>(undefined);
@@ -40,10 +42,10 @@ export const ResultProvider = ({ children }: { children: ReactNode }) => {
     []
   );
   const [lastPostDate, setLastPostDate] = useState<string | null>(null); // 投稿が0の場合はnull
-  const [noMorePending, setNoMorePending] = useState<boolean>(false);
-  const [noMoreFinished, setNoMoreFinished] = useState<boolean>(false);
-  const [pendingOffset, setPendingOffset] = useState<number>(0);
-  const [finishedOffset, setFinishedOffset] = useState<number>(0);
+  const pendingOffset = useRef<number>(0);
+  const finishedOffset = useRef<number>(0);
+  const noMorePending = useRef<boolean>(false);
+  const noMoreFinished = useRef<boolean>(false);
 
   return (
     <ResultContext.Provider
@@ -56,14 +58,10 @@ export const ResultProvider = ({ children }: { children: ReactNode }) => {
         setPendingResults,
         lastPostDate,
         setLastPostDate,
-        noMorePending,
-        setNoMorePending,
-        noMoreFinished,
-        setNoMoreFinished,
         pendingOffset,
-        setPendingOffset,
         finishedOffset,
-        setFinishedOffset,
+        noMorePending,
+        noMoreFinished,
       }}
     >
       {children}