Fito Feat Fito Feat - 9 months ago 122
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 ?

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