[pickers] Slowness in selecting a date in the `DesktopDateRangePicker` component when the number of calendars is high

[srbadni]

The problem in depth

I was looking to customize your date picker to resemble a date picker like the one on Expedia's site, where the months are displayed below the days in a column format:

- expedia

I wanted to achieve this using the DesktopDateRangePicker component, by setting the popper style to be responsive like a full-screen modal and setting the calendars value to 12. I also applied Flex-direction: column to the div tag that contains all the months so they are displayed below each other:

- my custom datepicker

The problem is that setting the calendars value to 12 has made the date selection process very slow. I've made good progress so far, but this issue has become a challenge for me at this stage.

Also, when I used React profiler, I got this report:

If this issue is caused by heavy animations, I am looking for a way to simplify this process.

Your environment

`npx @mui/envinfo`

``` System: OS: Windows 11 10.0.22631 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.56) npmPackages: @emotion/react: 11.11.4 => 11.11.4 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.38 @mui/core-downloads-tracker: 5.15.19 @mui/icons-material: 5.15.12 => 5.15.12 @mui/lab: 5.0.0-alpha.167 => 5.0.0-alpha.167 @mui/material: 5.15.12 => 5.15.12 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/styles: 5.15.12 => 5.15.12 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-date-pickers: 7.6.2 => 7.6.2 @mui/x-date-pickers-pro: 7.6.2 => 7.6.2 @mui/x-license: 7.6.1 @mui/x-license-pro: 5.17.12 => 5.17.12 @types/react: 18.2.64 => 18.2.64 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.2.2 => 5.2.2 ```

Search keywords: DesktopDateRangePicker, calendars, performance, delay Order ID: 92251

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[srbadni]

You can see the live example here (make sure to access it with a mobile device): https://react-bxwynh.stackblitz.io/

When the number of calendars is high, there is a noticeable slowdown, but when I reduce the number, the speed improves. Before purchasing the license, I checked if I could customize this component to display the months vertically and scroll through them. Based on this, I decided to buy the license. However, after completing the customization, I encountered significant slowness.

[LukasTy]

@srbadni It looks like "Expedia" uses your mentioned layout/design only on the mobile version of the webpage. Have you considered using MobileDateRangePicker for this as it technically better resembles the bahavior? 🤔 Another option could be to rebuild the input/interaction part using your desired entry/input and any modal/dialog solution you want to render DateRangeCalendar. Here is an experiment I've done with MobileDateRangePicker: https://stackblitz.com/edit/react-bxwynh-xyjqdz?file=Demo.tsx Does it help you alleviate the performance problems as compared to the desktop variant?

[srbadni]

@LukasTy I ran your example. In fact, in your example, the MobileDateRangePicker component is uncontrolled, which, as I tested in my Mobile device, makes the speed somewhat higher. But when I make it controlled, the processing and selection speed decreases again:

https://react-bxwynh-31wtta.stackblitz.io/

In Expedia, as soon as you click on a day, that day gets selected immediately. Overall, I didn't see much difference between your approach and the one I was originally implementing.

[LukasTy]

@srbadni thank you for confirming your discoveries. 👍 I'm adding this issue to the board to discuss possible approaches within the team. The DateRangeCalendar was not designed to work with so many calendars, but surfacing this problem could help us improve the performance of the DateRangeCalendar overall. 👌