Perf: virtualize the transaction list over 200 rows - #224
Merged
Baskarayelu merged 1 commit intoAug 28, 2026
Merged
Baskarayelu merged 1 commit into
Baskarayelu merged 1 commit into
Conversation
No virtualization existed anywhere, and no virtualization library is a dependency. Add a small dependency-free useVirtualizedList() for the single-known-row-height case: below `threshold` (default 200) items it's a no-op (windowing a handful of rows only adds scroll-math overhead), at/above it only the rows within the visible viewport (+ overscan) are ever returned, so DOM node count stays roughly constant regardless of list length. Clamps the window against both ends of the list so an out-of-range scrollTop can't slice to an empty result.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note on scope
No virtualization existed anywhere in the app, and no virtualization library (react-window, react-virtual, ...) is a dependency. Added a small dependency-free hook rather than a new heavy dependency, since this app's lists have a single known fixed row height -- the simple case a ~70-line hook covers without pulling in a general-purpose library. Also opened #116 in parallel, which adds the first real consumer (`TransactionsTable`) this can wire into.
Summary
`useTransactions()` has no cap, and nothing renders it as a windowed list -- a large result set would mount one DOM row per transaction.
Change
`lib/hooks/useVirtualizedList.ts`: `useVirtualizedList(items, { rowHeight, containerHeight, overscan?, threshold? })`.
Tests
`lib/hooks/useVirtualizedList.test.ts`: unvirtualized below threshold, correct window at rest, window/offset shift on scroll, DOM row count stays bounded (`<=20`) even for 50,000 items, and the end-of-list clamp (scrolling far past the end still returns a valid, non-empty window ending at the last item).
`npx vitest run lib/hooks/useVirtualizedList.test.ts`: 5 passed. `npx tsc --noEmit` / `npx eslint` on changed files: clean.
Related to #117