react-native-calendars: Agenda performance: VirtualizedList: You have a large list that is slow to update

Description

Hi, I’m trying to use the Agenda component. I took the example from the repo Agenda Example in order to see how the Agenda works.

Thing that you have to know: 1- I refactored the code a bit in order to use Functional Components instead Class Components. 2- The example creates the calendar items randomly. In my case I’m not doing this way, I created an object with a few items instead.

Agenda component is not working correctly

Expected Behavior

If I click on a date that has items, it should display the list view panel of the selected day like the following gif example expected behavior

Observed Behavior

The problem is that when I click on a date, it takes a long time to display the list view panel or, sometimes, it doesn’t even open the panel.

I’m not getting any errors, only the following message in console:

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": 36360,
  "dt": 9346,
  "prevDt": 967,
}

Code

import React, { useState, useEffect } from "react";
import { View, TouchableOpacity, Alert, Text } from "react-native";
import { Agenda } from "react-native-calendars";
import styles from "./styles";
import { FloatingButton } from "../../common/atoms";
import { EventsIcon } from "../../../res";

const EventsScreen = () => {

  const [items, setItems] = useState({
    "2017-05-16": [{ name: "item 1 - any js object" }],
    "2017-05-23": [{ name: "item 2 - any js object", height: 80 }],
    "2017-05-24": [],
    "2017-05-25": [{ name: "item 3 - any js object" }, { name: "any js object" }]
  });

  const renderItem = item => (
    <TouchableOpacity
      style={[styles.item, { height: item.height }]}
      onPress={() => Alert.alert(item.name)}
    >
      <Text>{item.name}</Text>
    </TouchableOpacity>
  );

  const renderEmptyDate = () => {
    return (
      <View style={styles.emptyDate}>
        <Text>This is empty date!</Text>
      </View>
    );
  };

  const rowHasChanged = (r1, r2) => r1.name !== r2.name;

  return (
    <View style={styles.safeArea}>
      <Agenda
        items={items}
        selected="2017-05-16"
        renderItem={renderItem}
        renderEmptyDate={renderEmptyDate}
        rowHasChanged={rowHasChanged}
      />
    </View>
  );
};

export default EventsScreen;

Environment

"expo": "^36.0.1" "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", "react-native-calendars": "^1.264.0",

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 15
Comments: 30

Commits related to this issue

feat(HorizontalCalendar): Got rid of react-native-calendar due to perfomance reasons react-native-calendar has been removed due to unresolved perfomance issues. More on that https://github.com/wix/re... — committed to ChildMindInstitute/mindlogger-app-refactor by BamMironov a year ago

Most upvoted comments

ISSUE LIVE RE-OPEN THIS ISSUE

+25

alew140 on Jun 12, 2021

This library looks good but the more you use it, the more you realise it was poorly built. The API has poor naming, some props start with enable and some props start with disable. There’s no prop to autofill empty dates and you have to do that yourself. The performance is garbage. Looking through the source code, the code is poorly written, and many types are wrong.

For example:

Screenshot 2022-06-01 at 8 09 56 PM

Not to mention 172 issues and inactive maintainers from a big company such as Wix. I understand this is open source but when a library like this reduces general developer productivity, then is it actually bringing value to the developer world?

My advice: If you are going to have real users, and there’s money on the line, do yourself a favour and build the calendar yourself or use another library.

+13

thespacemanatee on Jun 1, 2022

@emilisb Is there a way for this to be marked open or active again? It seems to be a problem for many people still and me as well.

Nothing I do seems to have any affect on the error. I have already memo-ized my renderItem component as well as attempted other performance improvements like adding these props to my AgendaList:

// I also messed with all their values to test
initialNumToRender={10}
windowSize={5}
maxToRenderPerBatch={5}
updateCellsBatchingPeriod={30}
removeClippedSubviews={false}
onEndReachedThreshold={0.1}

The error shows up when I scroll through the events quickly or when I hit the Today button

KrisLau on Sep 12, 2022

Hi everyone, I’m facing the same issue. Did someone find a solution?

agustinchiarotto on Apr 29, 2021

Please switch to flashlist. Thanks. Getting this issue on CalendarList.

pencilcheck on May 2, 2023

Same Issue: 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”: 39665.453125, “dt”: 1070, “prevDt”: 4954}

paudyaln on Oct 28, 2022

Any updates? CalendarProvider 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”: 39390, “dt”: 7256, “prevDt”: 28516}

maxsl89 on Sep 12, 2023

Have this issue when using CalendarList – especially inside of a native stack navigator

pfcodes on Nov 26, 2022

Two years old and no fix?

This component is awesome but it slows down every aspect of my app. Refresh controls that fetch and update state variables run fast and smooth until I open the tab that has the Agenda component. Subsequent action becomes unbelievably slow.

I hope there’s a fix for this at some point.

adrienclay36 on May 20, 2022

@emflomed17 , how was it once you generated the apk for Android? Any good news? Just confirming for future users who experience the same,

kusaasira on Feb 18, 2021