fix: too many requests after query change

config/routes.ts

@@ -73,18 +73,18 @@ export default [
         selectedIcon: 'icon-audio-filled',
         defaultIcon: 'icon-audio1',
         component: './playground/speech'
-      },
-      {
-        name: 'video',
-        title: 'Video',
-        path: '/playground/video',
-        key: 'video',
-        icon: 'icon-video-outline',
-        hideInMenu: false,
-        selectedIcon: 'icon-video-filled02',
-        defaultIcon: 'icon-video-outline',
-        component: './playground/video'
       }
+      // {
+      //   name: 'video',
+      //   title: 'Video',
+      //   path: '/playground/video',
+      //   key: 'video',
+      //   icon: 'icon-video-outline',
+      //   hideInMenu: false,
+      //   selectedIcon: 'icon-video-filled02',
+      //   defaultIcon: 'icon-video-outline',
+      //   component: './playground/video'
+      // }
     ]
   },
   {

src/hooks/use-table-fetch.ts

@@ -60,6 +60,8 @@ export default function useTableFetch<T>(
   const modalRef = useRef<any>(null);
   const rowSelection = useTableRowSelection();
   const { sortOrder, handleMultiSortChange } = useTableMultiSort();
+  const shouldUpdateRef = useRef(false);
+  const loadendRef = useRef(false);
 
   // for skeleton loading
   const [extraStatus, setExtraStatus] = useState<Record<string, any>>({
@@ -150,6 +152,7 @@ export default function useTableFetch<T>(
           total: newRes.pagination.total,
           totalPage: newRes.pagination.totalPage
         });
+        loadendRef.current = true;
         if (isInfiniteScroll) {
           setQueryParams(newParams);
         }
@@ -165,6 +168,7 @@ export default function useTableFetch<T>(
         total: res.pagination.total,
         totalPage: res.pagination.totalPage
       });
+      loadendRef.current = true;
       if (isInfiniteScroll && query?.page) {
         setQueryParams({
           ...queryParams,
@@ -180,6 +184,7 @@ export default function useTableFetch<T>(
         total: dataSource.total,
         totalPage: dataSource.totalPage
       });
+      loadendRef.current = true;
     } finally {
       debounceSetExtraStatus({
         firstLoad: false
@@ -190,24 +195,25 @@ export default function useTableFetch<T>(
   const debounceFetchData = _.debounce(fetchData, 300);
 
   const updateHandler = (list: any) => {
-    let shouldUpdate = false;
     _.each(list, (data: any) => {
       updateChunkedList(data);
     });
-    shouldUpdate = list.some(
+    shouldUpdateRef.current = list.some(
       (data: any) =>
         data.type === WatchEventType.DELETE ||
         data.type === WatchEventType.CREATE
     );
 
-    if (shouldUpdate && updateManually && dataSource.loadend) {
-      shouldUpdate = false;
+    if (shouldUpdateRef.current && updateManually && loadendRef.current) {
+      shouldUpdateRef.current = false;
       debounceFetchData();
     }
   };
 
   const createModelsChunkRequest = async (params?: any) => {
     if (!API || !watch) return;
+    shouldUpdateRef.current = false;
+    loadendRef.current = false;
     chunkRequedtRef.current?.current?.cancel?.();
     try {
       const query = _.omit(params || queryParams, ['page', 'perPage']);
@@ -241,6 +247,7 @@ export default function useTableFetch<T>(
 
   // for filters change
   const handleQueryChange = (params: any) => {
+    loadendRef.current = false;
     setQueryParams({
       ...queryParams,
       ...params