All React-bootstrap Tabs render function gets called every time regardless of which tab was selected

Question

The following is my code:

var WholeTab=React.createClass                                                 
({                                                                             
  getInitialState:function()                                                   
  {                                                                            
    return {                                                                   
      key: 1                                                                   
    };                                                                         
  },                                                                           
  handleSelect:function(key)                                                   
  {                                                                            
    this.setState({key});                                                      
  },                                                                           
  render:function()                                                            
  {                                                                            
    return (                                                                   
      <Tabs defaultActiveKey={1} id="controlled-tab-example">                  
        <Tab eventKey={1} title="Tab 1"><One/></Tab>                           
        <Tab eventKey={2} title="Tab 2"><Two/></Tab>                           
        <Tab eventKey={3} title="Tab 3"><Three/></Tab>                         
      </Tabs>                                                                  
    );                                                                         
  }                                                                            
});                                                                            
var One=React.createClass({                                                    
  render:function(){                                                           
    alert("one");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Two=React.createClass({                                                    
  render:function(){                                                           
    alert("two");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Three=React.createClass({                                                  
  render:function(){                                                           
    alert("three");                                                            
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});     

The thing which I have noticed is, whenever there is a change of a tab, the render function of all the tabs get called, regardless they were selected or not, and this happens not once, but 3 times. This is just a lame example, but if i have a lot of content in each and every tab, the behaviour I described above certainly affects the performance of the web-page and makes it slow. Am i doing anything wrong or is this a bug with react-bootstrap tabs because logically the render function of all the tabs should not get called on each and every change.

Answer 1

The react-bootstrap Tabs component has a boolean property unmountOnExit which causes the active tab to be the only one actually present in the DOM.

This feature is documented at https://react-bootstrap.github.io/components/tabs/

Answer 2

Even if unmountOnExit is true, when you switch between Tabs, you will still see the child component rendered twice.This is because the transition value renders the component again. You must set transition to false. So to make sure that the child component is rendered only once, you should edit your code like this:

<Tabs
    activeKey={activeKey}
    onSelect={onTabChange}
    unmountOnExit={true}
    mountOnEnter={true}
    transition={false}>

{children}

</Tabs>