Merge pull request #80 from taro-28/fix-debounce

Fix debounce bug
taro-28 · Sep 9, 2024 · 309cdf9 · 309cdf9
2 parents f53a8f9 + 23ff5fc
commit 309cdf9
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 28 deletions.
diff --git a/packages/tanstack-table-search-params/src/useColumnFilters.ts b/packages/tanstack-table-search-params/src/useColumnFilters.ts
@@ -50,7 +50,7 @@ export const useColumnFilters = ({ router, options }: Props): Returns => {
   const stringCustomColumnFilters = options?.decoder?.(router.query)
     ? JSON.stringify(options.decoder(router.query))
     : "";
-  const columnFilters = useMemo(
+  const _columnFilters = useMemo(
     () =>
       isCustomDecoder
         ? stringCustomColumnFilters === ""
@@ -72,7 +72,7 @@ export const useColumnFilters = ({ router, options }: Props): Returns => {
               ),
             };
       await updateQuery({
-        oldQuery: encoder(columnFilters),
+        oldQuery: encoder(_columnFilters),
         newQuery: encoder(newColumnFilters),
         router,
       });
@@ -82,21 +82,26 @@ export const useColumnFilters = ({ router, options }: Props): Returns => {
       paramName,
       options?.encoder,
       stringDefaultColumnFilters,
-      columnFilters,
+      _columnFilters,
     ],
   );
 
   const [debouncedColumnFilters, setDebouncedColumnFilters] = useDebounce({
-    stateValue: columnFilters,
+    stateValue: _columnFilters,
     updateQuery: updateColumnFiltersQuery,
     milliseconds: options?.debounceMilliseconds,
   });
 
-  return {
-    columnFilters:
+  const columnFilters = useMemo(
+    () =>
       options?.debounceMilliseconds === undefined
-        ? columnFilters
+        ? _columnFilters
         : debouncedColumnFilters,
+    [_columnFilters, debouncedColumnFilters, options?.debounceMilliseconds],
+  );
+
+  return {
+    columnFilters,
     onColumnFiltersChange: useCallback(
       async (updater) => {
         const newColumnFilters = functionalUpdate(updater, columnFilters);

diff --git a/packages/tanstack-table-search-params/src/useGlobalFilter.ts b/packages/tanstack-table-search-params/src/useGlobalFilter.ts
@@ -1,5 +1,5 @@
 import { type OnChangeFn, functionalUpdate } from "@tanstack/react-table";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { PARAM_NAMES, type State } from ".";
 import {
   decodeGlobalFilter,
@@ -32,7 +32,7 @@ export const useGlobalFilter = ({ router, options }: Props): Returns => {
   const defaultGlobalFilter =
     options?.defaultValue ?? defaultDefaultGlobalFilter;
 
-  const globalFilter = options?.decoder
+  const _globalFilter = options?.decoder
     ? options?.decoder?.(router.query)
     : decodeGlobalFilter(router.query[paramNames], defaultGlobalFilter);
 
@@ -48,25 +48,30 @@ export const useGlobalFilter = ({ router, options }: Props): Returns => {
               ),
             };
       await updateQuery({
-        oldQuery: encoder(globalFilter),
+        oldQuery: encoder(_globalFilter),
         newQuery: encoder(newGlobalFilter),
         router,
       });
     },
-    [router, paramNames, options?.encoder, defaultGlobalFilter, globalFilter],
+    [router, paramNames, options?.encoder, defaultGlobalFilter, _globalFilter],
   );
 
   const [debouncedGlobalFilter, setDebouncedGlobalFilter] = useDebounce({
-    stateValue: globalFilter,
+    stateValue: _globalFilter,
     updateQuery: updateGlobalFilterQuery,
     milliseconds: options?.debounceMilliseconds,
   });
 
-  return {
-    globalFilter:
+  const globalFilter = useMemo(
+    () =>
       options?.debounceMilliseconds === undefined
-        ? globalFilter
+        ? _globalFilter
         : debouncedGlobalFilter,
+    [_globalFilter, debouncedGlobalFilter, options?.debounceMilliseconds],
+  );
+
+  return {
+    globalFilter,
     onGlobalFilterChange: useCallback(
       async (updater) => {
         const newGlobalFilter = functionalUpdate(updater, globalFilter);

diff --git a/packages/tanstack-table-search-params/src/usePagination.ts b/packages/tanstack-table-search-params/src/usePagination.ts
@@ -80,7 +80,7 @@ export const usePagination = ({ router, options }: Props): Returns => {
   const stringCustomPagination = options?.decoder?.(router.query)
     ? JSON.stringify(options.decoder(router.query))
     : "";
-  const pagination = useMemo(
+  const _pagination = useMemo(
     () =>
       isCustomDecoder
         ? stringCustomPagination === ""
@@ -112,14 +112,14 @@ export const usePagination = ({ router, options }: Props): Returns => {
         };
       };
       await updateQuery({
-        oldQuery: encoder(pagination),
+        oldQuery: encoder(_pagination),
         newQuery: encoder(newPagination),
         router,
       });
     },
     [
       router,
-      pagination,
+      _pagination,
       paramName,
       options?.encoder,
       defaultPagination.pageIndex,
@@ -128,16 +128,21 @@ export const usePagination = ({ router, options }: Props): Returns => {
   );
 
   const [debouncedPagination, setDebouncedPagination] = useDebounce({
-    stateValue: pagination,
+    stateValue: _pagination,
     updateQuery: updatePaginationQuery,
     milliseconds: options?.debounceMilliseconds,
   });
 
-  return {
-    pagination:
+  const pagination = useMemo(
+    () =>
       options?.debounceMilliseconds === undefined
-        ? pagination
+        ? _pagination
         : debouncedPagination,
+    [_pagination, debouncedPagination, options?.debounceMilliseconds],
+  );
+
+  return {
+    pagination,
     onPaginationChange: useCallback(
       async (updater) => {
         const newPagination = functionalUpdate(updater, pagination);

diff --git a/packages/tanstack-table-search-params/src/useSorting.ts b/packages/tanstack-table-search-params/src/useSorting.ts
@@ -43,7 +43,7 @@ export const useSorting = ({ router, options }: Props): Returns => {
   const stringCustomSorting = options?.decoder?.(router.query)
     ? JSON.stringify(options.decoder(router.query))
     : "";
-  const sorting = useMemo(
+  const _sorting = useMemo(
     () =>
       isCustomDecoder
         ? stringCustomSorting === ""
@@ -65,23 +65,28 @@ export const useSorting = ({ router, options }: Props): Returns => {
               ),
             };
       await updateQuery({
-        oldQuery: encoder(sorting),
+        oldQuery: encoder(_sorting),
         newQuery: encoder(newSorting),
         router,
       });
     },
-    [router, paramName, options?.encoder, stringDefaultSorting, sorting],
+    [router, paramName, options?.encoder, stringDefaultSorting, _sorting],
   );
 
   const [debouncedSorting, setDebouncedSorting] = useDebounce({
-    stateValue: sorting,
+    stateValue: _sorting,
     updateQuery: updateSortingQuery,
     milliseconds: options?.debounceMilliseconds,
   });
 
+  const sorting = useMemo(
+    () =>
+      options?.debounceMilliseconds === undefined ? _sorting : debouncedSorting,
+    [_sorting, debouncedSorting, options?.debounceMilliseconds],
+  );
+
   return {
-    sorting:
-      options?.debounceMilliseconds === undefined ? sorting : debouncedSorting,
+    sorting,
     onSortingChange: useCallback(
       async (updater) => {
         const newSorting = functionalUpdate(updater, sorting);