Closed
Description
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 #13413 but not have any good solution, do you have any solution ?
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}
flatList :
return (
<FlatList
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 }) => <ProductItem item={item} /> ---pureComponent--
getItemLayout :
ITEM_HEIGHT = 150;
const _getItemLayout = (data, index) => ({
length: ITEM_HEIGHT * index,
offset: ITEM_HEIGHT * index,
index,
});