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.

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;

1 Answers

0
tekmin On

You may use Reactotron Benchmarking instead of console log