React-native: flatList (usage memory higher then Android OS)

Created on 22 Sep 2019  路  4Comments  路  Source: facebook/react-native

React Native version:

```
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-2400 CPU @ 3.10GHz
Memory: 1.97 GB / 12.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.13.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 23.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Google APIs Intel x86 Atom, android-27 | Android TV Intel x86 Atom, android-27 | Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.4 => 0.60.4

i have a flatlist + image (react-native-fast-image) and my code have all recommended
standards for optimization of flatlist and all component's are pureComponent . shouldComponentUpdate implement for stateless component.
removeClippedSubviews , legacyImplementation and getItemLayout have been implemented
all but our consumptioned memory is higher than android os memory ,i looked to https://github.com/facebook/react-native/issues/13413 but not have any good solution, do you have any solution ?

![Screenshot_1569137388](https://user-images.githubusercontent.com/20489331/65383898-55d58e00-dd28-11e9-9e60-8a820b9ffe9b.png)

## related links : 
https://facebook.github.io/react-native/docs/next/optimizing-flatlist-configuration
## re-render message :

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {dt: 5123, prevDt: 11364, contentLength: 4791.23828125}

<!--
 Issues without reproduction steps or code are likely to stall.
-->
## flatList : 

return (
data={data}
extraData={this.state}
renderItem={_renderItemProduct}
keyExtractor={_keyExtractor}
removeClippedSubviews={true}
legacyImplementation={true}
getItemLayout={_getItemLayout}
windowSize={*default 21 but --> data.length*}
initialNumToRender={5}
/>
);

## renderItem and keyExtractor : 

const _keyExtractor = (item, index) => Row_${index};
const _renderItemProduct = ({ item }) => ---pureComponent--

## getItemLayout : 

ITEM_HEIGHT = 150;
const _getItemLayout = (data, index) => ({
length: ITEM_HEIGHT * index,
offset: ITEM_HEIGHT * index,
index,
});
```

Bug FlatList Android Ran Commands

Most helpful comment

This issue is present in newer version too.

All 4 comments

It looks like you are using an older version of React Native. Please update to the latest release, v0.61 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

This issue is present in newer version too.

any news ?

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

Was this page helpful?
0 / 5 - 0 ratings