Multiple Range Latency

[iM-GeeKy]

Current behaviour

The multiple dates picker appears to gradually get slower the more dates that are selected. This seems to be more noticeable on iOS as opposed to Android and Web.

Expected behaviour

The dates should be selected in a reasonable time.

How to reproduce?

https://snack.expo.dev/@fitzwabs/react-native-paper-dates-multiple-picker or it also seen in the repositories example app.

Preview

Screen_Recording_2024-04-14_at_11.56.43_AM.mov

What have you tried so far?

@RichardLindhout I haven't looked into this yet, but I'm assuming it is performing a lot of re-renders. Perhaps you have more insight off the top of your head.

Your Environment

software	version
ios	17.4
android	14.0
react-native	0.73.6
react-native-paper	5.12.3
node	20.10.0
npm or yarn	yarn
expo sdk	50.0.17

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[iM-GeeKy]

@RichardLindhout Do you have any initial thoughts?

[iM-GeeKy]

@RichardLindhout Do you have any insight into this? I'm going to try to fix this in the next couple of weeks as it's affecting my app and any ideas you might have will serve as a good starting point.

[RichardLindhout]

Hey! It is probably because array will re-render everything because some property is not stable 'enough' so something triggers the day to re-render. I thought we only used simple promps in day to prevent this but maybe something else is slow

[iM-GeeKy]

Hey! It is probably because array will re-render everything because some property is not stable 'enough' so something triggers the day to re-render. I thought we only used simple promps in day to prevent this but maybe something else is slow

Yeah, I'm still looking into it but I've noticed that this renders 5 times (

react-native-paper-dates/src/Date/Month.tsx

Line 112 in ce9d1ba

const grid = React.useMemo(() => {

) and if I decrease

react-native-paper-dates/src/Date/Swiper.native.tsx

Line 37 in ce9d1ba

return [i - 2, i - 1, i, i + 1, i + 2]

it will render faster obviously b/c it's not drawing all the months again. I'm still digging, but I'm trying to get it fixed!

[RichardLindhout]

Do the days also re-render? I think thats the biggest bottleneck

[iM-GeeKy]

I'll have to put some logs in. I just know it only happens on iOS and the rendering of grid gets increasingly slower, but perhaps the days is the real culprit. The multiple on iOS is borderline unusable after only a few dates have been selected so I'd let to get to the bottom of it.

[iM-GeeKy]

It appears its rendering all the days again for each month, so I'll have to explore how we can avoid that from happening.

[iM-GeeKy]

Any ideas? It seems strange it only happens on iOS when the all the re-renders are happening on both platforms...It looks like it goes through this loop with rendering all of the days for each month again on selection

react-native-paper-dates/src/Date/Month.tsx

Line 332 in ce9d1ba

{grid.map(({ weekIndex, generatedDays }) => (