Virtual List item array size limit before client-side pagination is required

Data Handling Strategy

You should pass the full array to the Framework7 Virtual List rather than slicing it into pages. Virtualization is designed to manage the DOM overhead of large datasets; however, it does not reduce the memory footprint of the JavaScript array itself. Slicing the data manually before assignment often interferes with the framework's ability to calculate the total scrollable height and maintain a stable scroll offset.

Filtering and Searchbar Integration

When the Searchbar is active, filtering must run against the complete dataset. Filtering only the currently loaded page would result in incomplete search results, defeating the purpose of a global search. To maintain performance:

• Perform the filter on the master array.
• Assign the resulting filtered subset to the Virtual List.
• Implement a debounce (e.g., 200–300ms) on the search input to prevent the main thread from locking up during rapid keystrokes.

Performance Thresholds and Constraints

While there is no hard-coded item limit in Framework7, the practical limit is dictated by the browser's heap memory and the complexity of your filter logic. Based on general virtualization behavior, the following thresholds typically apply:

Dataset Size	Expected Behavior	Recommendation
< 5,000 items	Smooth scrolling and filtering.	Standard implementation.
5,000 – 20,000 items	Potential jank during filtering.	Mandatory debouncing; optimize filter logic.
> 20,000 items	Noticeable memory pressure.	Consider server-side filtering/pagination.

The Impact of Dynamic Item Heights

Dynamic item heights lower the safe threshold for stable scrolling. Because the Virtual List must estimate the total content height to set the scrollbar, variable heights can lead to "jumpy" offsets as the user scrolls and the framework discovers the actual height of newly rendered elements. If your items have highly variable heights, you are more likely to encounter stability issues as the array size increases.

Verification Steps

To determine the exact limit for your specific hardware and data structure, use these scoped tests:

1. Memory Baseline: Load 1k, 10k, and 50k items and monitor the JS Heap in Chrome DevTools Memory tab.
2. Filter Latency: Use the Performance tab to check for "Long Tasks" (over 50ms) during Searchbar input.
3. Scroll Stability: Rapidly scroll to the bottom of a 10k list with dynamic heights to check for layout shifts.

Diagnostic Detail Needed: Are your list items using a consistent height, or is the height dependent on dynamic content (e.g., varying text lengths)? This significantly changes whether you can rely on the default virtualization offsets.