react-native icon indicating copy to clipboard operation
react-native copied to clipboard

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. {"contentLength": 3629.142822265625, "dt": 11464, "prevDt": 8699}

Open akinkarayun opened this issue 2 years ago • 7 comments

Description

function renderItem({ item, index }) { return ( <GridShowCaseItem index={index} widget={item} /> ) }; const memoizedValue = useMemo(() => renderItem, [props.widgets]);

return ( <> <FlatList removeClippedSubviews={true} style={{ marginBottom: 44 }} showsVerticalScrollIndicator={false} windowSize={30} data={props.widgets} renderItem={memoizedValue} maxToRenderPerBatch={4} keyExtractor={(item, index) => index.toString()} /> </> );

GridShowCase.tsx

function renderItem({ item }) { return ( <Product ratingShow={false} deliveryOptionElement={false} key={item.id} product={item} /> ) }; const memoizedValue = useMemo(() => renderItem, [props.data]); return ( <View> <FlatGrid itemDimension={130} spacing={10} style={styles.showCaseContainer} data={props.data || []} removeClippedSubviews={true} renderItem={memoizedValue} listKey={moment().valueOf().toString()} /> </View> ); };

Version

"react-native": "0.66.0",

Output of npx react-native info

System: OS: Windows 10 10.0.22000 CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz Memory: 2.80 GB / 15.71 GB Binaries: Node: 16.5.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.4.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowAllTrustedApps: Disabled Versions: 10.0.18362.0, 10.0.19041.0 IDEs: Android Studio: Version 2020.3.0.0 AI-203.7717.56.2031.7678000 Visual Studio: 16.10.31321.278 (Visual Studio Community 2019) Languages: Java: 15.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE npmPackages: @react-native-community/cli: ^6.1.0 => 6.1.0 react: 17.0.2 => 17.0.2 react-native: 0.66.0 => 0.66.0 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

//NA

Snack, code example, screenshot, or link to a repository

No response

akinkarayun avatar Apr 19 '22 11:04 akinkarayun

Any help?

akinkarayun avatar Apr 22 '22 10:04 akinkarayun

There are several options for solving this problem:

  1. Optimize the code using PureComponent
  2. Use lazyload
  3. Dont use vanilla flatlist, use recyclerlistview or any other

And most importantly check that the application works not in dev mode

Rottelfeld avatar Apr 25 '22 09:04 Rottelfeld

@Rottelfeld I have tried all these already

akinkarayun avatar Apr 29 '22 12:04 akinkarayun

3. Dont use vanilla flatlist, use recyclerlistview or any other

@akinkarayun Did you find any solution ?

mbordia-eightfold avatar Dec 27 '22 05:12 mbordia-eightfold

Any Solution for this?

RidsUchit avatar Jun 28 '23 10:06 RidsUchit

i would like if they added tips for functional components too. PureComponent and shouldComponentUpdate are for class components only. especially since functional components are the recommended way to build react components, it would make sense to add corresponding tips for functional components.

Adnan-Bacic avatar Jul 06 '23 12:07 Adnan-Bacic

Any update on this?

TeodorDimitrov89 avatar Feb 08 '24 15:02 TeodorDimitrov89

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

react-native-bot avatar Aug 07 '24 05:08 react-native-bot