From c658d3496d652a349feddb7e591501d640a6603e Mon Sep 17 00:00:00 2001 From: sk1982 Date: Sun, 7 Apr 2024 22:12:52 -0400 Subject: [PATCH] fix: filter sorter usecallback --- src/components/filter-sorter.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/filter-sorter.tsx b/src/components/filter-sorter.tsx index 60936c0..5a3d772 100644 --- a/src/components/filter-sorter.tsx +++ b/src/components/filter-sorter.tsx @@ -165,14 +165,13 @@ const FilterSorterComponent = (null); const mounted = useIsMounted(); const breakpoint = useBreakpoint(); + const dataCallback = useCallback(typeof data === 'function' ? data : (() => { }), []); + const dataDep = typeof data === 'function' ? dataCallback : data; const localStateKey = `filter-sort-${pathname}`; const dataRemote = !Array.isArray(data); const pageSizeNum = +[...pageSize][0]; - - const deps = dataRemote ? [data, filterers, pageSize, filterState, currentPage, ascending, searcher, sorters, sorter, mounted, query] : - [data, filterers, filterState, ascending, searcher, sorters, sorter, mounted, query]; useEffect(() => { history.replaceState({}, '', `?${getParamsFromState({ @@ -205,10 +204,10 @@ const FilterSorterComponent = sorter.has(s.name))!; - if (Array.isArray(data)) { + if (Array.isArray(dataDep)) { const lower = query.toLowerCase(); - const filteredSorted = data + const filteredSorted = dataDep .filter(d => filterers.every(f => f.filter?.(filterState[f.name], d)) && searcher?.(lower, d)!) .sort(sorters.find(s => sorter.has(s.name))!.sort); if (ascending) @@ -226,7 +225,7 @@ const FilterSorterComponent = { if (nonce === prevNonce.current) { setProcessedData(d.data); @@ -234,12 +233,12 @@ const FilterSorterComponent = setLoadingRemoteData(false)); - }, [data, filterers, pageSize, filterState, currentPage, ascending, searcher, sorters, sorter, mounted, query]), dataRemote ? 250 : 100, debounceOptions); + }, [dataDep, filterers, pageSize, filterState, currentPage, ascending, searcher, sorters, sorter, mounted, query]), dataRemote ? 250 : 100, debounceOptions); const onQuery = useDebounceCallback(useCallback(() => { onChange(); onChange.flush(); - }, deps), 500) + }, [query]), 500) useEffect(() => { onChange(); @@ -251,7 +250,7 @@ const FilterSorterComponent =