⚡ Bolt: [Performance Improvement] Prevent rendering hidden QRCodes and add React.memo in BatchItem - #66
Conversation
Use React.memo with a custom comparison function for BatchItem in CoffeeBatch list to avoid re-rendering hidden DOM rows. Conditionally render heavy QRCode elements only when the row is visible. This improves large list rendering performance while maintaining compatibility with ReactHTMLTableToExcel which requires all rows to exist in the DOM. Co-authored-by: AntonioCardenas <11583391+AntonioCardenas@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. |
✅ Deploy Preview for heartfelt-swan-19c038 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
1 participant
💡 What: Added
React.memowith a custom comparison function toBatchItem.tsxand conditionally rendered the heavy<QRCode>component only when the row is actually visible in the current pagination view. Added a journal entry to.jules/bolt.mddocumenting the limitation around DOM-based exports requiring hidden nodes.🎯 Why: When paging through a large table of items, React was unnecessarily re-rendering hidden components. Additionally, building the
<QRCode>canvas element takes a noticeable amount of time per row. We cannot simply conditionally render the entire<tr>row when hidden because theReactHTMLTableToExcelplugin relies on these hidden nodes being present in the DOM. By usingReact.memowith a custom compare and lazily rendering just the heavy child elements like<QRCode>, we fix the performance bottleneck without breaking the export functionality.📊 Impact: This significantly improves rendering performance when paging through
List.tsx. The amount of DOM manipulation required when changing pages goes from building 10+ new<canvas>elements to simply toggling visibility state for the previously rendered components.🔬 Measurement: Navigate to the CoffeeBatch List screen. Change pages using the pagination component. The UI transition should be noticeably faster without lag since we no longer trigger full re-renders for every single row item when the page changes. Verify the Excel export still works as expected.
PR created automatically by Jules for task 12515036069590500619 started by @AntonioCardenas