⚡ Bolt: Memoize BatchItem to prevent hidden row re-renders - #69
⚡ Bolt: Memoize BatchItem to prevent hidden row re-renders#69AntonioCardenas wants to merge 1 commit into
Conversation
- Wrap BatchItem in React.memo to avoid re-rendering hidden rows on pagination change - Lazily evaluate QRCode to only render when the row is visible - Prevent heavy DOM updates and SVG generation for massive lists 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
Wrapped
BatchIteminReact.memowith a custom comparison function that checks if a row is actively visible. It also lazily renders the heavy<QRCode>component, substituting it with an empty placeholder div of identical dimensions when the row is hidden on other pagination pages.🎯 Why
In large paginated lists, like the list of coffee batches, components like
ReactHTMLTableToExcelrequire hidden data rows to remain physically present in the DOM for export. Previously, merely clicking 'Next Page' caused every single row to re-render, executing expensive DOM updates and regenerating SVG data for<QRCode>components that weren't even visible. This was a severe bottleneck for time-to-interactive during pagination.📊 Impact
<QRCode>SVG generation for items off-screen.ReactHTMLTableToExcel.🔬 Measurement
PR created automatically by Jules for task 17688641998151267933 started by @AntonioCardenas