Performance issues with React 18 only on iOS

[ashok3]

Description

I'm trying to use the Agenda component in our app using React 18 and React Native 0.70, but I have noticed that the Calendar part is updating very slowly and even incorrectly when we scroll the Reservations part fast on iOS.

To diagnose this, I tried the examples in the master branch and I noticed that it's working perfectly, but that you are using React 17 and React Native 0.68 for the examples.

Just to double check, I created a new React Native project using React 17 and React Native 0.68, and it worked like your example. However, I also created a new React Native project using React 18 and React Native 0.70 and the problem I describe above happens.

All this happens only on iOS. It seems fine on Android. I've provided both projects files here for you to compare this and see the issue clearly.

Expected Behavior

I expect it to work the same or even better in React 18 than React 17.

Observed Behavior

I observed that the Calendar part of the Agenda component was updating the selected date very slowly when using React 18.

Environment

"react": "18.1.0",
"react-native": "0.70.6",
"react-native-calendars": "^1.1293.0"

Testing on simulator: iPhone 14 Pro (iOS 16)

Reproducible Demo

Demo using React 18:
MyAppReact18.zip

Demo using React 17:
MyAppReact17.zip

Screenshots

React 17  ✅
https://user-images.githubusercontent.com/716309/211112127-78ac7d73-bed7-4b32-8758-ec1d0b0295f1.mp4

React 18 ❌
https://user-images.githubusercontent.com/716309/211112967-dc1c5a16-87da-4adf-a85c-b8d81bc7eba5.mp4

[fikriwebdev]

facing same issue

[GideonAgboba]

facing same issue

[devsales]

I'm having a performance issue with the Calendar & CalendarList components. It takes a long time to render and re-render (see video below). I haven't tested it on a real device though, only on the simulator.

"react": "18.1.0",
"react-native": "0.70.5",
"react-native-calendars": "^1.1293.0",

Calendar.List.bad.performance.mov

[fikriwebdev]

I'm having a performance issue with the Calendar & CalendarList components. It takes a long time to render and re-render (see video below). I haven't tested it on a real device though, only on the simulator.

"react": "18.1.0", "react-native": "0.70.5", "react-native-calendars": "^1.1293.0",

Calendar.List.bad.performance.mov

performance down after upgraded to RN 0.70, working fine on RN 0.69

[devsales]

I'm using expo and tried to downgrade the expo SDK to v. 46 in order to use RN 0.69. I didn't notice any difference...

[ofilipowicz]

It is a dealbreaker issue that prevents us from using this library

[costaDZ]

I'm experiencing slowness when changing between months and days

React native version : 0.70.5

[channeladam]

Is there any active maintainer of this repo?

[andrewjmathers]

Same problem on android, works a little bit better in release mode, but I'd expect it to be a bit faster

[onlaps]

same problem, after upgrading to the last version

[nirre7]

We see the same issue on Android and on Ios with CalendarList.
"react": "18.0.0",
"react-native": "0.69.7",
"react-native-calendars": "^1.1293.0",

[keithhackbarth]

We are experiencing this as well (similar to the video posted above) but don't have data points to know if it is an issue specific to react-native-calendars vs. react-native:

facebook/react-native#36296
facebook/react-native#35778
facebook/react-native#35778

I'm guessing that everyone that has reported this is using react-native ^0.7 with the legacy architecture. Is anyone experiencing it with the new architecture? Trying to decide if it is worth switching over and curious if this is the fix as it seems to be mentioned in the linked threads.

[keithhackbarth]

@michaelbbb - You mentioned in the linked thread that you were able to make some changes to improve performance. Would it be possible to share those changes here - I'd like to learn from what you did!

[conoremclaughlin]

We are experiencing this as well (similar to the video posted above) but don't have data points to know if it is an issue specific to react-native-calendars vs. react-native:

facebook/react-native#36296 facebook/react-native#35778 facebook/react-native#35778

I'm guessing that everyone that has reported this is using react-native ^0.7 with the legacy architecture. Is anyone experiencing it with the new architecture? Trying to decide if it is worth switching over and curious if this is the fix as it seems to be mentioned in the linked threads.

Likewise curious to see what luck people have had with the new architecture and if that addresses many of the current performance issues.

[danibonilha]

I'm having a performance issue with the Calendar & CalendarList components. It takes a long time to render and re-render (see video below). I haven't tested it on a real device though, only on the simulator.

"react": "18.1.0", "react-native": "0.70.5", "react-native-calendars": "^1.1293.0",

@devsales @nirre7 have you tried to use NewCalendarList ? I was having the same perf issues with CalendarList but there's this new one, which is one year old but is not documented

[devsales]

@danibonilha no, I haven't tried NewCalendarList. However I did test CalendarList on a real iOS device (iPhone 12) and the performance was better. It's not perfect but it was usable. Have you tried NewCalendarList?

[danibonilha]

@devsales I have, it's good even on simulator. The only issue is that the days take a while to load but it's the same i've experienced with calendarList also the props are a bit different but worth a try

[Villar74]

I tried NewCalendarList, but it have same picking performance issues, also as slower initial loading on simulator, so switched back to CalendarList

[kostas64]

Im facing the same issue only on iOS. Render is very slow. Android is rendering very fast. (CalendarList)

"react": "18.2.0",
"react-native": "0.71.9",
"react-native-calendars": "^1.1300.0",

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-26.at.19.06.40.mp4

[NovakArtsiom]

Do we have any updates about the issue? I tried NewCalendarList on a device and simulator, but it works worse than CalendarList.

"react": "18.2.0",
"react-native": "0.72.4",
"react-native-calendars": "^1.1301.0",

[guyromb]

Same issue

[vargajacint]

Hey folks, any update? We facing similar performance issues. Can we help somehow to resolve this issue?

[AlexMubarakshin]

Same issue

[vladyslavNiemtsev]

Same issue

[STonkoshkur]

It seems that this issue is not caused by React 18 itself, but by the new Hermes engine on iOS, which has been enabled by default since RN 0.70.

Due to various issues caused by Hermes on iOS, our team has decided to disable the Hermes engine for iOS, resulting in a significant increase in calendar performance.

"react": "18.2.0",
"react-native": "0.72.8",
"react-native-calendars": "^1.1303.0",

[NikitaGura]

Thanks for info @STonkoshkur. For me disabling hermes helped.

Solution for today is just add in Podfile:

  use_react_native!(
      :hermes_enabled => false // add this 
  )

[athul173]

Could something be done to handle the slow rendering without disabling heremes? Like showing a loading screen instead of the date string?

[norbiu]

@athul173 Did you end up finding a solution without disabling Hermes?

[danibonilha]

I ended up switching libraries to this one -> https://github.com/MarceloPrado/flash-calendar
the performance is so much better and customization too