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/