measure the rendering time of a component

[taioo]

Hi react-native team,

I'm currently working on the performance analytical topic regarding react native. I should measure the rendering time of a component that we have. I found following way how to do this, but not sure if I'm on the right way.

Below you can see a simple Button Widget. I'm using here the component constructor as init function to count the start time and the componentDidMount() function, which will be called after the render/build is done to count the end time and print it out.

import React, { Component } from "react";
import {
  TouchableOpacity,
  Text,
  View,
  StyleSheet
} from "react-native";


class ButtonWithBackground extends Component {


  state = {
    start:'0',
};

  constructor(props) {
    super(props);
    this.state.start=Date.now();
  }


  componentDidMount() {

    console.log('%c######## RENDER time ButtonWithBackground:','background: red',(Date.now()-this.state.start));
  }

  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress}>
        <View style={[styles.button, { backgroundColor: this.props.color }]}>
          <Text>
            press
          </Text>
        </View>

      </TouchableOpacity>

    );

  }

}

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    borderWidth: 1,
    borderColor: 'blue',
    borderRadius: 12,
    padding: 8,
    overflow: 'hidden',
    fontWeight: "bold",
    textAlign: "center",
    fontSize: 28
  }
});

export default ButtonWithBackground;

The results are different when I start the app on the (ios) emulator and If I just navigate to different UI that doesn't include the button and switch back.
Not sure how I should consider this in my results. Are there some options provided by react-native to control this?
The results are without coma because I'm using Date.now() . Maybe there is a better Timer object.

Best Regards,
taioo

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[jeremy-deutsch]

I don't think this is a bug report. Have you tried the DevTools Profiler?

[JKCooper2]

https://github.com/jhen0409/react-native-debugger has the react devtools built in which can show render times, whats being updated, and why

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.