Stop rendering of a component after componentDidMount()

Question

I have a search page with three components. The browse topics component lists the topics to choose from. The browse articles component lists all the articles based on the topic ID and loads all articles if there is no topic id. The home component holds the browsetopics and browsearticles component, and changes its state according to the topic which is clicked.

class BrowseTopics extends React.Component {
  constructor(props) {
    super(props);
    this.topicSelect = this.topicSelect.bind(this);
    this.state = {error: "", topics: []};
  }
  componentDidMount(){
    // API call which updates state topics with the list of topics
  }
  topicSelect(id,e) {
    e.preventDefault();
    this.props.topicChange(id);
  }
 render () {
    // Rendering list of topics from API and nothing if request has not been sent
  }
}

class BrowseArticles extends React.Component {
  constructor(props) {
    super(props);
    this.state = {error: "", articles: [], url: "/api/articles"};
  }
  componentDidMount() {
    if(this.props.topicId){
    var url = '/api/topic/'+this.props.topicId+'/articles';
    this.setState({url: url});
    }
    // Make a request to url and get articles
  }
  render () {
    // Renders the list of articles
  }
}

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.handleUpdate = this.handleUpdate.bind(this);
    this.state = {topicId: ""};
  }

  handleUpdate(topicId) {
    this.setState({topicId: topicId});
  }

  render () {

    return(
<div>
<BrowseTopics user={this.props.user} topicChange={this.handleUpdate}/>
          <BrowseArticles user={this.props.user} topicId={this.state.topicId}/>
</div>
      );
  }
}

What I need is, I want the browseTopics component to stop re-rendering on parent state change. I tried using shouldComponentUpdate() (which returns false) but that even stops the componentDidMount() part and the list isn't populated.

Once the request to API is made and component is rendered, I want all further re-rendering of browseTopics to stop for the sorting to function properly.

Answer 1

From docs:

if shouldComponentUpdate() returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be invoked

I'd probably want to set some sort of flag telling my BrowseTopics component that the API request has been made and I no longer need/want the component to update:

class BrowseTopics extends React.Component {
  constructor(props) {
    super(props);
    this.topicSelect = this.topicSelect.bind(this);
    this.state = {
      error: "",
      topics: [],
      hasFetched: false // flag for API
    };
  }
  componentDidMount(){
    // API call which updates state topics with the list of topics
    fetch( 'myapi.json' )
      .then( res => {
        // set flag denoting API results have been fetcehd
        this.setState({
          hasFetched: true,
          topics: <your topics>
        });
      })
  }

  shouldComponentUpdate(nextProps, nextState) {
    if ( this.state.hasFetched ) {
      return false;
    }
    return true;
  }
  ...