I'm using this react library: , I have created a simple Component like this:

export default class Sample extends Component {

    ponentDidMount() {
        console.log("Mount");
    }

    render () {
    return (

            <div>
             Hello
            </div>
    );
  }
}

And I have inserted it inside the tabs in my sample app:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Sample from './Sample.jsx';

class App extends Component {
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (


      <Tabs
        onSelect={this.handleSelect}
        selectedIndex={2}
      >

        <TabList>

          <Tab>Foo</Tab>
          <Tab>Bar</Tab>
          <Tab>Baz</Tab>
        </TabList>

        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
      </Tabs>
    );
  }
}

render(<App/>, document.getElementById('container'));

And every time I switch Tab the ponentDidMount is called and I can see the Mount log in the console. My question is how can avoid calling the ponentDidMount method every time, but calling it only the first time? I make this question because I want add an Ajax call inside it and I don't want make the Ajax call every time I switch the tab, but only one time.

Thanks

I'm using this react library: https://github./reactjs/react-tabs, I have created a simple Component like this:

export default class Sample extends Component {

    ponentDidMount() {
        console.log("Mount");
    }

    render () {
    return (

            <div>
             Hello
            </div>
    );
  }
}

And I have inserted it inside the tabs in my sample app:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Sample from './Sample.jsx';

class App extends Component {
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (


      <Tabs
        onSelect={this.handleSelect}
        selectedIndex={2}
      >

        <TabList>

          <Tab>Foo</Tab>
          <Tab>Bar</Tab>
          <Tab>Baz</Tab>
        </TabList>

        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
      </Tabs>
    );
  }
}

render(<App/>, document.getElementById('container'));

And every time I switch Tab the ponentDidMount is called and I can see the Mount log in the console. My question is how can avoid calling the ponentDidMount method every time, but calling it only the first time? I make this question because I want add an Ajax call inside it and I don't want make the Ajax call every time I switch the tab, but only one time.

Thanks

• javascript
• reactjs

3 Answers 3

You can use forceRenderTabPanel={true} on the <Tabs/> ponent so that the tabs stay mounted.

<Tabs
  onSelect={this.handleSelect}
  selectedIndex={2}
  forceRenderTabPanel={true}
>

I have just had the same problem. All your ponents need to exist at the same time and use this.STATE.tabIndex and CSS to control the invisibility.

Create the Tabs with controlled mode:

class App extends Component {
  constructor() {
    super();
    this.state = { tabIndex: 0 };
  }
  render() {
    return (
      <Tabs onSelect={tabIndex => this.setState({ tabIndex })}>
        <TabList>
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>
        <div style={this.state.tabIndex===0 ? 
          {display:"block"}: {display:"none"}} >
        </div>
        
        <div style={this.state.tabIndex===0 ? 
          {display:"block"}: {display:"none"}} >
        </div>

      </Tabs>
    );
  }
}

Every time React adds a ponent to the DOM ponentDidMountwill fire, there is no way around that.

In your case, when you switch tabs, I assume that React unmounts the current content of the TabPanel ponent and mounts the new content, which is your Sample ponent, which in turn, once mounted, will fire the ponentDidMount method.

Depending on what your AJAX call returns, you should probably rethink where to place the AJAX call.