⚡ Bolt: [performance improvement] Hoist constants in Button component#144
⚡ Bolt: [performance improvement] Hoist constants in Button component#144
Conversation
Co-authored-by: Cukurikik <266119688+Cukurikik@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
💡 What:
Refactored
src/components/ui/button.tsxto hoist thevariantsandsizesconstant objects outside of theButtoncomponent's render loop.🎯 Why:
Because
variantsandsizeswere defined inside theReact.forwardRefrender function, they were being needlessly re-allocated in memory on every single render of a<Button>component. Given thatButtonis a highly ubiquitous UI component used frequently throughout the application, this caused unnecessary garbage collection overhead and broke referential stability for these objects.📊 Impact:
Improves render performance and reduces memory pressure/garbage collection by allocating the configuration objects exactly once during module initialization, rather than
Ntimes (whereNis the number of button renders). Reduces the component's internal work per render cycle.🔬 Measurement:
Since this is a micro-optimization aimed at reducing memory allocations in a heavily reused component, the easiest way to verify is via code inspection or profiling memory allocation over time in the browser dev tools while interacting with many buttons on the screen. Functionally, the UI visual verification shows no regressions and the vitest test suite passes.
PR created automatically by Jules for task 3394382915328212360 started by @Cukurikik
Summary by CodeRabbit