fix: restrict request in infinite scroll

src/hooks/useStackedFetchBase/index.ts

@@ -1,6 +1,5 @@
 import { to } from 'await-to-js';
 import { useEffect, useReducer } from 'react';
-import { debounce } from '@src/utils/debounce';
 import { reducer } from './reducer';
 import { Action, State } from './types';
 
@@ -14,7 +13,7 @@ function useStackedFetchBase<T>(
   });
 
   useEffect(() => {
-    const fetchList = debounce(async () => {
+    const fetchList = async () => {
       dispatch({
         _TAG: 'FETCH',
         isInitialFetching,
@@ -32,7 +31,7 @@ function useStackedFetchBase<T>(
       if (response) {
         dispatch({ _TAG: 'SUCCESS', isInitialFetching, data: response });
       }
-    });
+    };
 
     fetchList();
   }, [willFetch, isInitialFetching]);

src/views/ReviewPage/hooks/useFetch.ts

@@ -1,18 +1,31 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import useBooleanState from '@src/hooks/useBooleanState';
 import useStackedFetchBase from '@src/hooks/useStackedFetchBase';
 import { api } from '@src/lib/api';
 import { ExtraPart } from '@src/lib/types/universal';
 import useInfiniteScroll from './useInfiniteScroll';
 
 const useFetch = (selected: ExtraPart) => {
-  const { ref, count, setCount } = useInfiniteScroll();
+  const jobRecordRef = useRef<Record<number, 'QUEUED' | 'DONE'>>({});
+  const isIncrementable = () =>
+    Object.values(jobRecordRef.current).every((value) => value === 'DONE');
+
+  const { ref, count, setCount } = useInfiniteScroll(isIncrementable);
   const [canGetMoreReviews, setCanGetMoreReviews, setCanNotGetMoreReviews] = useBooleanState(true);
 
+  useEffect(() => {
+    jobRecordRef.current[count] = 'QUEUED';
+  }, [count]);
+
   useEffect(() => {
     function initializeStates() {
       setCount(1);
       setCanGetMoreReviews();
+      for (const key in jobRecordRef.current) {
+        if (Object.hasOwnProperty.call(jobRecordRef.current, key)) {
+          delete jobRecordRef.current[key];
+        }
+      }
     }
     return () => {
       initializeStates();
@@ -23,6 +36,7 @@ const useFetch = (selected: ExtraPart) => {
     setCanNotGetMoreReviews();
     const response = await api.reviewAPI.getReviews(selected, count);
     response.hasNextPage ? setCanGetMoreReviews() : setCanNotGetMoreReviews();
+    jobRecordRef.current[count] = 'DONE';
     return response.reviews;
   }, [selected, count, setCanGetMoreReviews, setCanNotGetMoreReviews]);
   const state = useStackedFetchBase(willFetch, count === 1);

src/views/ReviewPage/hooks/useInfiniteScroll.ts

@@ -1,12 +1,14 @@
 import { useState } from 'react';
 import useIntersectionObserver from '@src/hooks/useIntersectionObserver';
 
-export default function useInfiniteScroll() {
+export default function useInfiniteScroll(isIncrementable: () => boolean) {
   const [count, setCount] = useState(1);
 
   const ref = useIntersectionObserver(
     async (entry, observer) => {
-      setCount((prevCount) => prevCount + 1);
+      if (isIncrementable()) {
+        setCount((prevCount) => prevCount + 1);
+      }
       observer.unobserve(entry.target);
     },
     { rootMargin: '80px' },