React Native Render Method Being Called 3-5x - reactjs

Question

I am fairly new to React and React Native and am trying to keep performance in mind as Im working with it.
I read somewhere that it was a good idea to put a console.log(...) into the render(...) method of my components so that I can see how often they were being rendered.
I did this for one of my first screens the user sees and I noticed it was rendering 3 to 4 times right away.
The code for this method is defined below, and does nothing but render 3 sections.
Is there anything in the code below that is being done incorrectly or in a non performant way that I should be doing differently? For example, I read in several places that the way I am binding my callbacks is not correct and will register multiple times (each time render is done).
Also, is it alright or normal for the render(...) to be done multiple times or can it be avoided?
class Home extends Component {
_onRequestItemClick(id){
alert(id);
}
_onMakeRequestClick(){
this.props.dispatch(navigatePush('Create Request'));
}
render() {
console.log('Rendering Home...');
return (
<View style={styles.container}>
<View style={[styles.base,styles.halfHeight]}>
{this._renderRequestList()}
</View>
<View style={[styles.base,styles.quarterHeight]}>
{this._renderMakeRequestButton()}
</View>
<View style={[styles.quarterHeight]}>
{this._renderFulfillmentScroller()}
</View>
</View>
);
}
_renderRequestList(){
let { requests } = this.props;
return (
<RequestList
requests={requests}
onRequestItemClick={this._onRequestItemClick.bind(this)}
/>
);
}
_renderMakeRequestButton(){
return (
<ActionButton
title="Make Request"
onActionPress={this._onMakeRequestClick.bind(this)}
/>
);
}
_renderFulfillmentScroller(){
let { fulfillments } = this.props;
var onPressItem = (item)=> alert('item selected:' + item.id);
return (
<CalendarBlockScrollView
bounces={false}
style={styles.scroller}
itemStyle={styles.fulfillment}
items={fulfillments}
onPressItem={onPressItem}
/>
);
}
}
function mapDispatchToProps(dispatch) {
return {
dispatch
};
}
function mapStateToProps(state) {
return {
userId:state.get('profile').current.id,
requests:state.get('requests').all.requests,
fulfillments: state.get('fulfillments').all.fulfillments
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Home);

Answer 1

Unless I'm missing something, this piece of code seems ok. Maybe it's the component that calls this one that's resulting the multiple renders?
I can give you a few suggestions:
Try replacing render with:
render() {
console.log('Rendering Home...');
return (<View />);
}
and check whether the component is rendered multiple times. If it doesn't then try adding another piece each time until you find the problem. If it does then it's not the problem with this component. It the parent component that's causing this.
like you said, binds are very expensive. so binding every render is a bad idea. you can either bind in construction time or use arrow function:
constructor() {
this._onRequestItemClick = this._onRequestItemClick.bind(this);
}
_renderMakeRequestButton(){
return (
<ActionButton
title="Make Request"
onActionPress={(event) => this._onMakeRequestClick(event)}
/>
);
}
console.log is an expensive, make sure you remove it when going to production.
mapDispatchToProps is redundant. you can just remove it.
You can read more about react-native performance here