search

web-ridge / react-native-paper-dates

Smooth and fast cross platform Material Design date and time picker for React Native Paper
https://www.reactnativepaperdates.com
MIT License
637 stars 161 forks source link

Multiple Range Latency #383

Open iM-GeeKy opened 2 months ago

iM-GeeKy commented 2 months ago

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

https://github.com/web-ridge/react-native-paper-dates/assets/7604441/b1e2d30d-81ad-48ad-ade3-66de8cd2b26f

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[bot] commented 2 months ago

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 commented 1 month ago

@RichardLindhout Do you have any initial thoughts?

iM-GeeKy commented 4 days ago

@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 commented 1 day ago

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 commented 1 day ago

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 (https://github.com/web-ridge/react-native-paper-dates/blob/ce9d1ba2c8bb29d99a86efa9bf29d38e84394c35/src/Date/Month.tsx#L112) and if I decrease https://github.com/web-ridge/react-native-paper-dates/blob/ce9d1ba2c8bb29d99a86efa9bf29d38e84394c35/src/Date/Swiper.native.tsx#L37 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 commented 1 day ago

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

iM-GeeKy commented 1 day ago

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 commented 9 hours ago

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