@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
50 lines (49 loc) • 1.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDebouncedFetch = useDebouncedFetch;
const tslib_1 = require("tslib");
const react_1 = require("react");
function useDebouncedFetch(onFetchData, delay = 300) {
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
const debounceTimer = (0, react_1.useRef)(null);
const lastFetchParams = (0, react_1.useRef)('');
const debouncedFetch = (0, react_1.useCallback)((filters) => tslib_1.__awaiter(this, void 0, void 0, function* () {
if (!onFetchData)
return null;
const currentParams = JSON.stringify(filters);
if (debounceTimer.current) {
clearTimeout(debounceTimer.current);
}
return new Promise((resolve) => {
debounceTimer.current = setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
if (lastFetchParams.current === currentParams) {
resolve(null);
return;
}
lastFetchParams.current = currentParams;
setIsLoading(true);
try {
const result = yield onFetchData(filters);
resolve(result);
}
catch (error) {
resolve(null);
}
finally {
setIsLoading(false);
}
}), delay);
});
}), [onFetchData, delay]);
(0, react_1.useEffect)(() => {
return () => {
if (debounceTimer.current) {
clearTimeout(debounceTimer.current);
}
};
}, []);
return {
debouncedFetch,
isLoading,
};
}