Performance on mobile

[tusharmath]

I have a one plus one running chrome on android. I tried the side nav example on it and have attached the timeline data below. I am not able to achieve anywhere close to 60fps and that's because of the expensive VDOM diffs being done on every touchmove event.

ReactSideNavPerf.json.zip

This one, which doesn't use lib, turns out to be much faster — https://googlechrome.github.io/ui-element-samples/side-nav/

[woogenius]

@tusharmath I think you can disable touch behavior for now. I turned off as well.

[tusharmath]

@woogenius I don't think that's a solution.

[balloob]

Yeah, we should debounce the onTouchMove calls to not clog up the paint queue. Pull request welcome.

[tonygentilcore]

In addition to debouncing, it would be nice if touch events could all be made passive:
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[balloob]

Good point. To use passive listeners, we would have to attach our DOM Event listeners ourselves using a ref-callback instead of having React attach them.

[tonygentilcore]

Yeah, facebook/react#6436 :/

[Ayc0]

you can fasten the module without using the passive listeners : your main issue comes from React itself:

Currently, when onTouchMove is triggered, you reset the state with new values of touchCurrentX and touchCurrentY. So the all lifecycle of a component is triggered

What you should do is set a ref to the sidebar and directly set the style by doing something like:
this.sidebar.setAttribute('style', fromObjectToCSS(sidebarStyle)) (but you'll need to call this function manually and not rely on the rerender of the component)

[Ayc0]

and also, you should throttle the touchMove function

[timbset]

Hey, guys. I have a solution that is high-performance enaugh - https://github.com/timbset/react-advanced