1f21b7bcb9
* 💡 **What:** Implemented a generic `debounce` utility and applied it to the `Navbar` component's window resize event listener (150ms delay). Added a `.cancel()` method to the debounce utility to prevent memory leaks/errors on unmount. * 🎯 **Why:** The `resize` event fires rapidly, causing `getBoundingClientRect` (a layout-thrashing operation) to run excessively, impacting performance. * 📊 **Measured Improvement:** In a benchmark test simulating 100 rapid resize events: * **Baseline:** 200 calls to `getBoundingClientRect`. * **Optimized:** 2 calls to `getBoundingClientRect`. * **Result:** ~99% reduction in layout calculations during rapid resizing. * Added `src/components/layout/Navbar.perf.test.tsx` to prevent regression.
31 lines
668 B
TypeScript
31 lines
668 B
TypeScript
export interface DebouncedFunction<F extends (...args: any[]) => any> {
|
|
(...args: Parameters<F>): void;
|
|
cancel: () => void;
|
|
}
|
|
|
|
export function debounce<F extends (...args: any[]) => any>(
|
|
func: F,
|
|
wait: number
|
|
): DebouncedFunction<F> {
|
|
let timeout: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
const debounced = function (...args: Parameters<F>) {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(() => {
|
|
func(...args);
|
|
timeout = null;
|
|
}, wait);
|
|
};
|
|
|
|
debounced.cancel = () => {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
timeout = null;
|
|
}
|
|
};
|
|
|
|
return debounced as DebouncedFunction<F>;
|
|
}
|