- SDK Version:40.0.0
- Platforms(Android/iOS/web/all): Android
I am using flatlist to render post having video and text and i am getting following error:-
Each item of the list consists of a video.
The maximum number of items in the list is 10
Note: Only Android
Error:
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.
Object {
“contentLength”: 4555.63623046875,
“dt”: 881,
“prevDt”: 2739,
}
Components:
Parent Component
const [list, setList] = useState([]);
const [loading, setLoading] = useState(false);
const cellRefs = useRef([]);
// Main
useEffect(() => {
_getData();
}, []);
const _createData = () => {
const data = [];
for (let index = 0; index < 5; index += 1) {
data.push({
id: uuidv4(),
username: `username-${Math.floor(Math.random() * 1000)}`,
});
}
return data;
};
const _getData = () => {
setLoading(true);
const reponse = _createData();
setTimeout(() => {
setList([...list, ...reponse]);
setLoading(false);
}, 1000);
};
const _onViewableItemsChanged = React.useRef(({ changed }) => {
changed.forEach((item) => {
const cell = cellRefs.current[item.key];
if (cell) {
if (item.isViewable) {
cell.play();
} else {
cell.stop();
}
}
});
});
const _viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 100 });
const _renderItem = useCallback(({ item }) => (
<Post
data={item} ref={(ref) => { cellRefs.current[item.id] = ref; }}
/>
), []);
const _keyExtractor = useCallback((item) => item.id.toString(), []);
<FlatList
data={list}
initialNumToRender={2}
maxToRenderPerBatch={1}
windowSize={5}
onEndReachedThreshold={0.9}
removeClippedSubviews
onViewableItemsChanged={_onViewableItemsChanged.current}
viewabilityConfig={_viewConfigRef.current}
keyExtractor={_keyExtractor}
onEndReached={_getData}
showsVerticalScrollIndicator={false}
snapToInterval={Dimensions.get('window').height}
snapToAlignment="start"
decelerationRate="fast"
renderItem={_renderItem}
ListFooterComponent={_footerIndicator}
/>
Post Component
const Post = forwardRef((props, ref) => {
const video = useRef(null);
useImperativeHandle(
ref,
() => ({
async play() {
await _playVideo();
},
async stop() {
await _stopVideo();
},
async pause() {
await _pauseVideo();
}
}),
);
.....
return (
<View style={Styles.root}>
<Video
ref={video}
style={Styles.video}
source={{ uri: '..' }}
resizeMode="stretch"
shouldPlay={false}
isLooping
/>
</View>
)});
export default React.memo(Post);
Note: I would also appreciate if you suggest flat list optimization
Thanks for helping