React Native Flatlist Render Error VirtualizedList

  1. SDK Version:40.0.0
  2. 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

Hey @looot, I’d recommend taking a look at the RN docs section on this: Optimizing Flatlist Configuration · React Native

Cheers,
Adam

1 Like

Hey @adamjnav , thank you for answering. I did the recommended in docs.
I’m still getting warnings when Post Component is pure component

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.

I solved my problem,The problem is the statusBarHegiht in android.

// Style

video:{
height: Dimensions.get(‘window’).height + StatusBar.currentHeight,
}

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.