Description
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