Should Elm pagination use Array.slice or List.take/drop with Lazy for large datasets?

The Recommended Approach

For datasets of 100,000+ items, Array.slice is the superior choice for pagination. It provides significantly better performance for random access and deep pagination compared to List.take and List.drop.

Performance and Memory Analysis

Algorithmic Complexity

The primary differentiator is how these structures reach the desired page offset:

• Lists: List.drop and List.take operate in O(n) time. To reach page 1,000 of a 100k dataset, Elm must traverse every preceding element from the head of the list. This creates a noticeable lag as the user navigates deeper into the dataset.
• Arrays: Array.slice operates with much higher efficiency (effectively O(k) where k is the slice size). Because arrays are contiguous memory blocks, the runtime can jump directly to the starting index.

The Role of Lazy

It is a common misconception that Lazy.map or Html.Lazy can mitigate the cost of list traversal. Lazy only optimizes the view reconciliation process (preventing the DOM from re-rendering if the data hasn't changed); it does not change the underlying algorithmic complexity of List.drop. If you use List.drop inside a lazy function, the O(n) traversal still occurs every time the lazy function is forced to execute.

Memory and Retention

While Array.slice creates a new array, it contains references to the existing elements rather than deep-copying the data itself. The memory churn is generally negligible compared to the CPU cost of linear list traversal. To avoid unnecessary memory retention, do not store the sliced "page" in your Model. Instead, store only the currentPageIndex and perform the slice inside the view function.

Implementation Pattern

Follow this pattern to ensure the original dataset remains the single source of truth and old pages are garbage collected immediately after the view update:

1. Store the full dataset as an Array in your Model.
2. Store the currentPage as an Int.
3. Calculate the slice range dynamically in the view:

   viewPage model =
           let
               start = model.currentPage * pageSize
               end = start + pageSize
               pageItems = Array.slice start end model.allData
           in
           -- Render pageItems here

Verification

To verify the performance gap in your specific environment, you can wrap the slicing logic in a Debug.log timer or use the Browser's Performance tab. You will observe that List.drop execution time increases linearly as the page index increases, while Array.slice remains constant.

Diagnostic Detail: Are you performing frequent insertions or deletions at the beginning of the dataset? If so, the cost of updating an Array (O(n)) may outweigh the benefits of O(1) access.