Very long re-rendering times in 0.71.3

[MichalBBBB]

For the latest update on this situation, please refer to this comment.

---

Description

I have a complex calendar component in my app. I previously ran it on 0.66.5, where it was really fast, but after upgrading to 0.71.3, performance dropped drastically, to the point that it is unusable.

The problem is most obvious on ios, but also appears on Android.

I used to react devtools in flipper to measure the re-render times. On ios in 0.66.5, the component re-rendered in about 7ms, on 0.71.3 it took nearly 400ms. On android the 0.66.5 took about 10ms, 0.71.3 took about 30ms.

The app uses dayjs and Flashlist, but performance was the same when switching to regular Flatlist.

React Native Version

0.71.3

Output of npx react-native info

System:
OS: macOS 13.0.1
CPU: (8) arm64 Apple M1
Memory: 139.16 MB / 16.00 GB
Shell: 3.3.1 - /opt/homebrew/Cellar/fish/3.3.1/bin/fish
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Watchman: 2022.01.17.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /opt/homebrew/lib/ruby/gems/3.0.0/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 29, 30, 33
Build Tools: 29.0.2, 30.0.2, 30.0.3, 33.0.0
System Images: android-30 | Google APIs Intel x86 Atom, android-S | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7678000
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Run the application and click on any day in the calendar. It has a visible lag between the click and the reaction.

Snack, code example, screenshot, or link to a repository

This is an example on 0.71.3: https://github.com/MichalBBBB/react-native-calendar
This is an example on 0.66.5: https://github.com/MichalBBBB/react-native-calendar-old

[SuperBigBang]

The same problem, on samsung s23 animation and everything slows down

[samjayhk]

Hello, I also found this issue after upgrading react-native from 0.65+ to 0.71+. For example, JSON.stringify() of around 10000 characters took 0.007 second to complete on 0.65+, while 0.71+ took around 0.08 second to complete. Looking at the numbers, this took 1042% longer then old version.

For someone who may interested in hermes-engine, it will just results in more and more time cost :( (around 0.8 second).

Right now I'm trying to figure out which version of react-native will causing this issue, will keep update here.

[tj-mc]

Experiencing this after upgrading from 0.69.7 to 0.70.5, and 0.70.7.

[samjayhk]

After a long debugging, I found that it is more like the problems of react-navigation and react-redux, not because of the react-native, although it really became more slower after enabling the hermes-engine.

Anyway, after downgrading the react-navigation from v6 or v5 to v4 , the performance regression problem disappeared, even if it is based on the react-native v0.71.3 and react v18.2.0. I also tried to downgrade the react-redux to v1.3.0 or even 1.0.0, but it was not helpful for the debugging.

This looks like starting from v5 of react-navigation have changing its render() operation, which also causes different performances from v4 every render(), especially in the component which based on the connect() of react-redux.

But so far I can't find related discussions on the repository of react-navigation, and I haven't found a solution to solve this problem, because @react-navigation/native-stack is also obvious for performance regression.

Since the problem I have faced after debugging is found that not really due to react-native, I am not good at continuing to discuss it here, but if you have any ideas for this, please continue to discuss.

[MichalBBBB]

The problem is the sample apps I provided use neither react-navigation, nor react-redux
I have already made some modifications to the original component to improve performance, but it is still at least 5 times slower than the older version without these improvements

[tj-mc]

@MichalBBBB Do you find that the issues are worse in low power mode? We have noticed a general reduction in performance but severe animation freezes / navigation issues on iOS in low power mode, and for all android devices.

[SuperBigBang]

Но до сих пор я не могу найти соответствующие обсуждения в репозитории react-navigation, и я не нашел решения для решения этой проблемы, потому что @react-navigation/native-stackэто также очевидно для снижения производительности.

Поскольку проблема, с которой я столкнулся после отладки, оказалась не совсем из-за react-native, я не могу продолжать обсуждать ее здесь, но если у вас есть какие-либо идеи на этот счет, пожалуйста, продолжайте обсуждение.

please send links to discussions in other repositories to follow the topic

[MichalBBBB]

@MichalBBBB Do you find that the issues are worse in low power mode? We have noticed a general reduction in performance but severe animation freezes / navigation issues on iOS in low power mode, and for all android devices.

The performance drop is always present on the iPhone, though I don't see that big of a problem on android

[tj-mc]

In our case the difference was most notable in startup time. From 0.69.7 to 0.70.7: Startup time doubled, and memory usages almost tripled.

[keithhackbarth]

Is this on old or new architecture?

[MichalBBBB]

Old, I just downgraded back to 0.69.8, which seems to be the newest version without these performance problems.

[conoremclaughlin]

After upgrading from 0.68.2 to 0.71.3, we're seeing a similar slowdown across the app but it's especially apparent on screens that re-render themselves upon focus. Here's an example of the slowdown where all libraries are the same, except react and react-native:

0.68.2 (snappy): https://www.loom.com/share/d0f9dac183f849e2ac6c6909b26a24c3
0.71.3 (significant lag on the learn tab): https://www.loom.com/share/2b73dae94d324b999d7ed31832565779

Edit: Note these were compiled jsc and hermes is unfortunately worse so there may be two issues between the hermes build artifacts that had a fix pushed and the overall architecture changes that are slowing down both.