perf(cfdi): optimize page performance
Database optimizations: - Add indexes on fecha_emision, tipo, estado, rfc_emisor, rfc_receptor - Add trigram indexes for fast ILIKE searches on nombre fields - Combine COUNT with main query using window function (1 query instead of 2) Frontend optimizations: - Add 300ms debounce to autocomplete searches - Add staleTime (30s) and gcTime (5min) to useCfdis hook - Reduce unnecessary API calls on every keystroke Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -7,6 +7,8 @@ export function useCfdis(filters: CfdiFilters) {
|
||||
return useQuery({
|
||||
queryKey: ['cfdis', filters],
|
||||
queryFn: () => cfdiApi.getCfdis(filters),
|
||||
staleTime: 30 * 1000, // 30 segundos
|
||||
gcTime: 5 * 60 * 1000, // 5 minutos en cache
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
17
apps/web/lib/hooks/use-debounce.ts
Normal file
17
apps/web/lib/hooks/use-debounce.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
Reference in New Issue
Block a user