How to make Perf work on React-Native?

Question

Currently running Perf on React-Native yields error and the package seems to depend on the DOM. https://facebook.github.io/react/docs/perf.html#using-perf

But still its mentioned in the React-Native docs? https://facebook.github.io/react-native/docs/performance.html#profiling

I have not succeeding in running it at least.

Answer 1

Yes, I found the similar issue, it seems to me react-addons-perf only work on react, for react native project, you can use RCTRenderingPerf which is a built-in tool in react native lib. My react native version is "react-native": "^0.45.1"

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 can verify it by running:

...
  _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>
    );
  }
...

Make sure Remote Debug JS is on, then you can see the results on chrome console.