LWCAdvancedvirtual-scrollingperformancerendering
Build virtual scrolling list for 5000 custom object rows in LWC
Real World Scenario
Product catalog LWC renders 5000 rows in DOM crashing mobile browsers on Experience Cloud site.
Expected Answer
• Render only viewport rows plus small buffer using scroll position math
• Fixed row height simplifies offset calculation for virtual list
• Fetch data in pages matching scroll prefetch threshold
• Use transform translateY for row positioning not 5000 DOM nodes
• Evaluate lightning-datatable virtualization before custom implementation
• Debounce scroll handler preventing fetch storm at scroll boundaries
• Test mobile Safari memory with 5000 logical rows virtualized
Follow-Up Questions & Answers
Click to expand — each follow-up includes a direct, interview-ready answer
Direct answer: Render only viewport rows plus small buffer using scroll position math Also consider: Fixed row height simplifies offset calculation for virtual list In practice: Fetch data in pages matching scroll prefetch threshold Optimize for scale and operational observability.
Architect Perspective
Virtual scroll is mandatory above few hundred custom rows—pagination alone insufficient for catalog UX.