React JSX Question
React native custom navbar setState avoid rendering all
I have a custom navbar component using react native router flux :
render() {
return (
<View style={styles.navBar}>
{this._renderNavBarLeft() }
{this._renderNavBarMiddle() }
{this._renderNavBarRight() }
</View>
)
}
with render middle part:
_renderNavBarMiddle() {
return (
<View style={styles.navBarItem}>
{ this.state.timeElapsed ? (<Text style={styles.text}>{Moment.utc(this.state.timeElapsed).format('HH:mm:ss')}</Text>) : <Text style={styles.text}>00:00:00</Text>}
</View>
)
}
and i have a backgroundTimer to refresh middle navbar part
componentDidMount(){
console.warn("mount")
const intervalId = BackgroundTimer.setInterval(() => {
this.setState({
timeElapsed : new Date() - this.state.startTime,
})
},1000)
}
how can i avoid {this._renderNavBarLeft() } and {this._renderNavBarRight() } being render each time setState (timeElapsed ) was called ?
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
You can try to include
shouldComponentUpdate(nextProps, nextState) {
// return false, if component should not update
return false;
}
to your left and right navbar components. Probably you need to pass additonal props, to avoid re-rendering.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download