1f21b7bcb9e39cb2eaa399d4aa189679757ecb7a
* 💡 **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.
Description
No description provided
Languages
TypeScript
79.1%
CSS
20.3%
HTML
0.6%