react-native
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}
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
Any help?
There are several options for solving this problem:
- Optimize the code using PureComponent
- Use lazyload
- Dont use vanilla flatlist, use recyclerlistview or any other
And most importantly check that the application works not in dev mode
@Rottelfeld I have tried all these already
3. Dont use vanilla flatlist, use recyclerlistview or any other
@akinkarayun Did you find any solution ?
Any Solution for this?
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.
Any update on this?
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.