react-native-paper-dates
react-native-paper-dates copied to clipboard
web-ridge
Multiple Range Latency
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 |
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@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.
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
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!
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.
It appears its rendering all the days again for each month, so I'll have to explore how we can avoid that from happening.
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 https://github.com/web-ridge/react-native-paper-dates/blob/ce9d1ba2c8bb29d99a86efa9bf29d38e84394c35/src/Date/Month.tsx#L332