Repository navigation
feat: add MiniFlatList, a minimal FlatList-like list - #2
Merged
Merged
Conversation
Builds on NaiveList with the core ideas of React Native's FlatList: - keyExtractor (default key, then id, then index) keys items and their cached sizes, so sizes survive inserts and reorders. Unmeasured items count as the average measured size. - initialNumToRender items are rendered before the viewport is measured. - windowSize sets the rendered area in viewports. - Batched rendering: the scroll offset lives in a ref, so scrolling does not re-render while the visible items are rendered. The off-screen area fills maxToRenderPerBatch items every updateCellsBatchingPeriod ms; a blank visible area renders right away. - Cells are memoized and re-render only when their props or extraData change. - Offsets are looked up with binary search. The example app can switch between NaiveList and MiniFlatList. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EZxDtj1CphSjr2V67rdmFP
Like FlatList, the first initialNumToRender items stay mounted after the window moves away, so scrolling back to the top shows them instantly. A spacer stands in for the items between them and the window. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EZxDtj1CphSjr2V67rdmFP
mdjastrzebski
force-pushed
the
claude/stacked-prs-followup-jgwa6e
branch
from
October 6, 2026 11:03
4774797 to
95b8930
Compare
mdjastrzebski
changed the base branch from
claude/minimal-flat-list-api-mkmand
to
main
October 6, 2026 11:07
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.
Summary
Adds
MiniFlatList, a separate component insrc/MiniFlatList/that adds the core ideas of React Native'sFlatListon top ofNaiveList.NaiveListis unchanged and stays the simplest version.keyExtractoritem.key→item.id→ indexextraDatainitialNumToRenderwindowSizemaxToRenderPerBatchupdateCellsBatchingPeriodThe defaults match
FlatList.How it works
VirtualizedList.computeRenderWindowalways renders the visible items, then grows towardwindowSizeviewports, adding at mostmaxToRenderPerBatchitems that are not already rendered. Items that are already rendered and still inside the target are kept at no cost. After each commit, an effect schedules the next batch. The chain stops once a batch leaves the window unchanged, the same pattern ascomponentDidUpdate→_scheduleCellsToRenderUpdate.addInitialItemsputs the firstinitialNumToRenderitems in front of the render window and removes any overlap. The list renders the initial items, a spacer, the window and a tail spacer. This is FlatList's scroll-to-top optimization, which it keeps in the "initial region" of its render mask.renderItemmust be stable for this to work, as inFlatList.computeItemOffsetsbuilds the start offsets once per render.findItemsInAreafinds the items in an area with binary search. Unmeasured items count as the average measured size.The pure logic lives in
item-offsets.tsandrender-window.ts, and is unit tested apart from React.Not included (FlatList features for later PRs)
ItemSeparatorComponent,ListHeaderComponent,ListFooterComponentandListEmptyComponent,onEndReached,getItemLayout,initialScrollIndexandscrollToIndex,onViewableItemsChanged,horizontal,inverted, and clamping the tail spacer to the last measured item.Other changes
NaiveList.tsxthat makelintfail on feat: add NaiveList, a minimal virtualized list #1. The same fix belongs in feat: add NaiveList, a minimal virtualized list #1, and the two will merge cleanly.NaiveListandMiniFlatList.renderItemis now defined at module level.Testing
yarn typecheck,yarn lintandyarn testpass: 36 tests in total, 26 of them new.initialNumToRender(rendered first and kept after scrolling away), batch growth, the immediate render when the visible area is blank, sizes staying with their keys after a reorder, memoization withextraData, and empty data.