Performance issues: all days always render on markedDate update

When we use CalendarList with props markedDates={{}}, all days (basic/interactive) of all calendars will always re-render, even if there’s nothing to update. This is a problem for my app’s performances. (I use Agenda, and when items change, all calendar days re-render, + I’d like to provide custom markedDates)

Here are detected problems. I didn’t submit a PR because I’d like to discuss the potential solutions first. Once validated by the team I can submit a PR

Binding during render in Calendar, and using bound function in shouldComponentUpdate of Day:

onPress={this.pressDay.bind(this, day)}

If we bind, this means when calendar renders, all of its days will always render.

I think it’s fine to remove the prev.onPress !== next.onPress from the shouldComponentUpdate of the Day components.

Default marked props is not a constant

  getDateMarking(day) {
    if (!this.props.markedDates) {
      return false;
    }
    const dates = this.props.markedDates[day.toString('yyyy-MM-dd')] || [];
    if (dates.length || dates) {
      return dates;
    } else {
      return false;
    }
  }

The [] part is a problem because if a day has no explicit marking, it will always be a new objet, triggering re-rendering of the day.

One very simple solution is to use a constant element and instead to const dates = this.props.markedDates[day.toString('yyyy-MM-dd')] || EmptyArray;

By the way, I don’t really understand why we pass an empty array here. marked accepting array prop seems to me like a hack to quickly be compatible with Agenda’s items shape, but wouldn’t it make more sense to pass an empty object as default?

No optimization on CalendarList

The calendar list should not pass all markedDays for every calendar. Instead it should rather only pass to a calendar the marked days of the calendar’s month, so that the calendar component could choose to not render

This is probably less important and more tricky optimization

[sibelius]

@tautvilas also check this https://github.com/wix/react-native-calendars/pull/175

it could improve a little bit as well

[tautvilas]

CalendarList has been migrated to FlatList in 1.6.0 , this might improve performance.