React-Router Running Slow on Hybrid App

[danieloliveira079]

Hi all,

I've created a project based on Docs project and after got rid of some stuff that I wont use I've compiled a hybrid app using phonegap. Basically I kept Left Nav menu and a few pages/components.

I got surprised after install on a Android Samsung S4 and realise that when selecting any link from the left nav it takes a couple of seconds to get the page rendered on the main container.

This does not happen on iPhone.

After some debugging I realise that the problem occurs after react-router triggers.

Using react-router on another app I can't face any problem.

Are there anybody looking into that?

[ftorre104]

I'm working on a large, isomorphic react application using react-router and fluxxor. We have the exact problem. The responsive site works fine on new/faster computers -- tested and works fast on iPhone 6, and MacBookPro. However it is noticeably slower on older devices. We've tested Android on Samsung Note 2 running Android 4.3 and older Windows computers.

We've profiled the timelines and it appears to be whenever our actions trigger changes, causing re-renders. Not necessarily a lot of DOM changes (pretty small changes actually), but apparently a lot of react JS (mounting and other lifecycle methods as well as diffing I assume).

We've been able to make some improvements by batching our actions to result in less 'emit change' events. But this seems to me to be an anti-pattern for react, where you should loosely be able to re-render.

I'm thinking its a brute CPU power problem; its just to much JS.... (hoping it is not that, that would be horrible). I hope others have more insights to this.

[shaurya947]

Seems like this is (or perhaps was?) more of an issue with React / react router..

@oliviertassinari any thoughts?

[oliviertassinari]

First of all, the PhoneGap runtime is faster on iOS than on Android.
The rendering of the virtual dom of material-ui component is slow.
The first thing to do is to use immutable data and to resolve this #1176.
The second thing would be to reduce the CPU cycle needed to create the virtual dom.

[ftorre104]

That is good advice.
To follow up on my comment, we were able to get significant improvements by correctly using PureRenderMixin. (We thought we had it, but had previously implemented it incorrectly, and react was re-rendering every mounted component :/)
Now much faster on iOS and android. Still noticeably faster on iOS than android, albeit it is now much more usable.

[shaurya947]

@ftorre104 feel free to close this issue if you want

[newoga]

I'm going to close this for now. We also have another issue that relates to performance using Cordova #2036