title: component measure the rendering time
body: <p>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 the following way how to do this, but not sure if I'm on the right way.</p>
  
  <p>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. </p>
  
  <pre><code>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 (
        &lt;TouchableOpacity onPress={this.props.onPress}&gt;
          &lt;View style={[styles.button, { backgroundColor: this.props.color }]}&gt;
            &lt;Text&gt;
              press
            &lt;/Text&gt;
          &lt;/View&gt;
  
        &lt;/TouchableOpacity&gt;
  
      );
  
    }
  
  }
  
  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;
  </code></pre>