React Native Flatlist - VirtualizedList: you have a large list that is slowly updating

I have a flat list with lots of content, and when I scroll down after 10 to 15 pages in the debugger console, I get the following:

VirtualizedList: you have a large list that is slowly updating - make make sure your renderItem function displays the components that follow. such as PureComponent, shouldComponentUpdate, etc. {dt: 582, prevDt: 1651, contentLength: 15187.5}

FYI: I tried using PureComponent and other ways, but no one helps. I get the same output in the console.

Why am I getting this and how can this be solved?

This is my code:

<FlatList
    data={outfits}
    keyExtractor={(item, index) => index}
    numColumns={2}
    initialNumToRender={5}
    getItemLayout={(outfits, index) => (
       { length: 50, offset: 50 * index, index }
    )}
    extraData={this.state.extraData}
    renderItem={({item,index}) => <Items item={item} index={index}/>}
    onRefresh={this.handleRefresh}
    refreshing={this.state.refreshing}
    onEndReached={this.handleLoadMore}
    onEndReachedThreshold={20}
    ListFooterComponent={this.renderFooter}
/>
+6
source share
2 answers

Content https://docs.nativebase.io, Content View PureComponent. !

+1

RefreshControl

 import { StyleSheet, RefreshControl } from 'react-native';

...
render(
  <Content refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} />}>
       <List .../>
      </Content>
...
)
+1

Source: https://habr.com/ru/post/1690387/


All Articles