Warning, VirtualizedList: You have a large list that is slow to update

Question

I get this error with my FlatList:

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.

My renderItem is:

renderItem(item) {
    return (
        <View style={[styles.item]}>
            <AgendaItem item={item} />
        </View>
    );
}

And my component:

import React from "react";
import propTypes from "prop-types";
import { Text, View, WebView } from "react-native";
import { filterString } from "../../helpers";
const AgendaItem = ({
    item: {
        title,
        venue,
        colour,
        organiser,
        startTime,
        endTime,
        description,
        allDay,
        textColor
    }
}) => {
    let descriptionNoHtml = description.replace(/<\/?[^>]+(>|$)/g, "");

    return (
        <View
            style={{
                padding: 10,
                backgroundColor: colour || "white"
            }}
        >
            {title ? (
                <Text style={{ color: textColor || "black" }}>{title}</Text>
            ) : null}
            {description ? (
                <Text style={{ color: textColor || "black" }}>
                    {descriptionNoHtml}
                </Text>
            ) : null}
            {venue ? (
                <Text style={{ color: textColor || "black" }}>{venue}</Text>
            ) : null}
            {organiser ? (
                <Text style={{ color: textColor || "black" }}>{organiser}</Text>
            ) : null}
            {startTime ? (
                <Text style={{ color: textColor || "black" }}>
                    {startTime + " - " + endTime}
                </Text>
            ) : null}
        </View>
    );
};

AgendaItem.propTypes = {
    title: propTypes.string,
    venue: propTypes.string,
    colour: propTypes.string,
    organiser: propTypes.string,
    description: propTypes.string,
    startTime: propTypes.string,
    endTime: propTypes.string,
    allDay: propTypes.string,
    textColor: propTypes.string
};

export default AgendaItem;

How can I use shouldComponentUpdate to remove the warning?

Answer 1

The doc provides what you need to think when rendering vertualized long list:

If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as “windowing”. This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

This is where you'll need to use PureComponent or utilize shouldComponentUpdate hook to update only if required.

---

You're using stateless component which cannot have any lifecycle method. To use lifecycle method, you'll need to use statefull component that is class based component.

You may replace stateless component with PureComponent or Component. If you use Component then you may need to use shouldComponentUpdate hook to notify the component only updates on new change is detected. Here's an example using PureComponent.

Replace:

const AgendaItem = ({
    item: {
        title,
        venue,
        colour,
        organiser,
        startTime,
        endTime,
        description,
        allDay,
        textColor
    }
}) => {

With:

class AgendaItem extends React.PureComponent {
  const { item: {
            title,
            venue,
            colour,
            organiser,
            startTime,
            endTime,
            description,
            allDay,
            textColor
        }
    } = this.props

Without using PureComponent, the component will update on every state change of any component. But using PureComponent, it will update only if new item is detected.

If you want to use shouldComponentUpdate hook rather, then look ahead here for reference.