Fito Feat Fito Feat - 3 months ago 51
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() }


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>}

and i have a backgroundTimer to refresh middle navbar part

const intervalId = BackgroundTimer.setInterval(() => {
timeElapsed : new Date() - this.state.startTime,

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