How To Resolve "VirtualizedList: You Have A Large List That Is Slow To Update"?

On the opposite side, the <VirtualizedList> is a base execution of the <FlatList> and <SectionList> parts, which are likewise better recorded. As a rule, <VirtualizedList> ought to possibly truly be utilized on the off chance that you really want more adaptability than FlatList gives, for example for use with changeless information rather than plain exhibits

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 (

)
};
const memoizedValue = useMemo(() => renderItem, [props.data]);
return (

<FlatGrid
itemDimension={130}
spacing={10}
style={styles.showCaseContainer}
data={props.data || []}
removeClippedSubviews={true}
renderItem={memoizedValue}
listKey={moment().valueOf().toString()}
/>

);
};

Version

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