[FlatList] FlatList and VirtualizedList Scroll performance is laggy after 30+ rows .
Problem
Description Flatlist or VirtualizedList Scroll lags horribly after 30-40 rows . I am fetching the same data on onEndReached . Upto 30 rows its looks fine , but after that scrolling drops several frames . When I disable virtualization , scroll becomes normal but but responsiveness goes away . I tried disabling virtualizing on scrolling velocity this way . isVirtualizationTrue(e){ var dOffset=(e.nativeEvent.contentOffset.y- this.state.lastOffset) var dt=(e.timeStamp-this.state.lastTimeStamp) var velocity = dOffset/dt var isInstant=velocity-this.state.lastVelocity>.01 if(velocity<1 && !isInstant){ return false } if(velocity>1){ return true } if(velocity <.25){ return true } } But again , there's problem for the unmounted Component that are removed from the views , which takes long time to show up again . Is there any way to improve the scroll performance ? Here's my sample code <FlatList shouldItemUpdate={(props,nextProps)=> { return props.item!==nextProps.item } } onEndReached={this.onRefresh.bind(this)} onEndReachedThreshold={200} onRefresh={this.onRefresh.bind(this)} refreshing={this.props.Feed.isFetching } data={this.state.items} renderItem={this.renderItem.bind(this)} /> My data is sort
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Optimize FlatList Performance with Memoization and KeyExtractor
The lag in scrolling performance after 30-40 rows is likely due to the overhead of rendering too many components at once, leading to excessive re-renders and memory usage. The current implementation does not efficiently handle updates to items, causing unnecessary renders and affecting scroll performance. Additionally, the lack of a proper key extractor can lead to inefficient reconciliation of the list items.
Awaiting Verification
Be the first to verify this fix
- 1
Implement keyExtractor
Add a keyExtractor prop to the FlatList to uniquely identify each item. This helps React optimize rendering and avoid unnecessary re-renders.
javascriptkeyExtractor={(item) => item.id.toString()} - 2
Use React.memo for renderItem
Wrap the renderItem function in React.memo to prevent unnecessary re-renders of list items when their props haven't changed.
javascriptconst MemoizedItem = React.memo(({ item }) => { /* render logic */ }); - 3
Optimize shouldItemUpdate
Refactor the shouldItemUpdate function to use a more efficient comparison method, such as shallow comparison, to reduce the complexity of checking item updates.
javascriptshouldItemUpdate={(prevProps, nextProps) => !shallowEqual(prevProps.item, nextProps.item)} - 4
Batch data fetching
Instead of fetching all data at once, implement pagination or batching to load data in smaller chunks, reducing the initial load and improving scroll performance.
javascriptonEndReached={this.onLoadMore.bind(this)} - 5
Adjust onEndReachedThreshold
Set the onEndReachedThreshold to a lower value to trigger data loading earlier, allowing for a smoother experience as users scroll.
javascriptonEndReachedThreshold={0.5}
Validation
Test the FlatList performance by scrolling through the list after implementing the changes. Monitor for any lag or dropped frames. Ensure that the list updates correctly when new data is fetched and that the scrolling experience remains smooth.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep