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}

[akinkarayun]

Description

function renderItem({ item, index }) { return (

)

}; 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 (

); };

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]

Any help?

[Rottelfeld]

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

[akinkarayun]

@Rottelfeld I have tried all these already

[mbordia-eightfold]

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

@akinkarayun Did you find any solution ?

[RidsUchit]

Any Solution for this?

[Adnan-Bacic]

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.

[TeodorDimitrov89]

Any update on this?

[react-native-bot]

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.

[za-rakib]

any update??