Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Mounting / unmounting react components on tab change

  • Hi,

    Probably a dumb question but I really cannot sort it out, when the app is first loading, all the tab components get mounted, the componentDidMount is called.
    What I’am aiming is to only mount the active tab component and on tab change to unmount the current component and mount the next selected one.

    For example, by default the Home should be mounter but LastTen and Search to be left untouched, if I switch to LastTen then I want the Home to be unmounted and only LastTen mounted.


    class Tabs extends React.Component {
      renderTabs() {
        return [
            content: <Home key="home" navigator={this.props.navigator} />,
            tab: <Tab key="home" label="Home" icon="ion-ios-home-outline" />
            content: <LastTen key="last10" navigator={this.props.navigator} />,
            tab: <Tab key="last10" label="Last photos" icon="ion-ios-albums-outline" />
            content: <Search key="forms" navigator={this.props.navigator} />,
            tab: <Tab key="search" label="Search" icon="ion-search" />
      render() {
        return (