Slow performance in formatLongDate

[andrepcg]

I'm noticing that when I open the calendar (it's behind a button click to open) there's a small delay. I've been trying to track the performance using the Chrome Dev Tools and found this (running React on production):

formatLongYear is taking 116ms which is quite a bit. This happens rendering the Tile component.

Has this happened to anyone?

[bs85]

Same here, was doing some performance analysis and realized more than half of my (pretty heavy) app rendering was spent in those functions.

@wojtekmaj this looks like those functions are only used for aria purpose, could you confirm? If so, would you be ok to add a prop like disableAria? Tell me if you want a PR or if you'd like to do it yourself.

@andrepcg for now, dirty but works:

import * as DateFormatter from 'react-calendar/dist/shared/dateFormatter';
DateFormatter.formatLongDate = () => '';
DateFormatter.formatMonthYear = () => '';
DateFormatter.formatMonth = () => '';
DateFormatter.formatWeekday = () => '';
DateFormatter.formatShortWeekday = () => '';

[wojtekmaj]

I tried to reproduce this and I can confirm that the performance of this function is poor. I'm not sure what we can do about this yet, but will experiment and let you know.

@bs85 Yes, at the moment they are used for accessibility purposes.

[andrepcg]

I only noticed this slowdown after upgrading our project dependencies last week.

No performance slowdown with packages:

• "react": "^16.4.0"
• "react-calendar": "^2.16.1"

Now I'm working with:

• "react": "^16.8.6"
• "react-calendar": "^2.18.1"

[hjyssg]

For my code, I just ignore formatLongDate when there is no locale.

// ------------  Day.jsx

<Tile
    {...otherProps}
    classes={[
      ...classes,
      className,
      isWeekend(date, calendarType) ? `${className}--weekend` : null,
      neighboringMonth ? `${className}--neighboringMonth` : null,
    ]}
    date={date}
    formatAbbr={locale && formatLongDate}

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[wojtekmaj]

Okay, I think I've found the issue. Turns out, calling date.toLocaleString(locale, options) is significantly slower than calling Intl.DateTimeFormat(locale, options).format(date), with format function cached.

I've created a test page with 10 calendars on it, ran full page render with 6x CPU slowdown, these are the results.

Before:

Total JavaScript time: 3960ms
        dateFormatter: 1804ms (45%)

After:

Total JavaScript time: 1934ms
        dateFormatter:   91ms (4%)