Profiling JS with React Native

Question

My app uses graphically complex, interactive controls. They are running slowly on older devices. The actual rendering is fast and profiling the app in Instruments shows that most of the work is done in executeJSCall, suggesting the problem lies in the javascript, or in the bridge serialization. What tools can I use to narrow it down?

Any luck in figuring out the way to profile JS ? I'm facing a similar problem. — Karthik207, Jan 24 '17 at 10:40
Yeah, if you open the debug menu and tap Start Systrace, it'll start profiling. Then just stop it when you've finished. However, the reports won't open at first. Check [here](http://stackoverflow.com/questions/16644116/unable-to-view-html-trace-report-generated-by-systrace-tool-in-android-sdk). — Robert Clouth, Jan 25 '17 at 11:22

score 2 · Answer 1 · edited May 23 '17 at 12:02

2

RN's built-in Systrace doesn't offer useful information about what's going on in the app. From my observations, it shows a lot of the inner workings of React Native, but that doesn't directly help pinpoint the actual code in the application.

Slowlog has given me more information on where to look for performance bottlenecks. It measures at the function level which has its limits but it's better than Systrace.

Also check this SO answer.

edited May 23 '17 at 12:02

Community

1
1

answered Apr 20 '17 at 15:21

pmont

2,083
22
43

Slowlog seems to be promising but discontinued. – Felix Oct 10 '18 at 02:08

score 1 · Answer 2 · edited Apr 11 '19 at 19:58

On the mobile side, we can use RCTRenderingPerf to measure the time used/wasted to mount/update a certain component Import Perf

import PerfMonitor from 'react-native/Libraries/Performance/RCTRenderingPerf';

Start measurements

PerfMonitor.toggle();
PerfMonitor.start();

Stop measurements and print Results

PerfMonitor.stop();

You do not need to explicitly call print method to print the results, stop() already covered that. You could also use systrace to check the Android UI performance https://facebook.github.io/react-native/docs/performance.html#profiling

Make sure you enabled Debug on remote JS by pressing command+D and choose Debug remote JS, it will show a table based rendering time for each of the component and nested child component

The following is the source code to hook it up in App.js

export default class App extends React.Component {

  constructor(props){
    super(props)
    this.state= {index:1}
  }

  _setIndex(idx){
    PerfMonitor.toggle();
    PerfMonitor.start();
    this.setState({index:idx})
  }

  componentDidUpdate(){
    PerfMonitor.stop();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to react-native {helloWorld()}</Text>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Button title="click me to see profiling in console log" onPress={()=> this._setIndex(2)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Profiling JS with React Native

2 Answers2