How to do render only after http request completed in ReactJS

Question

I need the render function of my component to be called only after the request for the componentDidMount function is completed.

componentDidMount(){    
    let ctx = this;
    ApiService.get('/busca/empresa/pagina').then(function(response){
      if(response.data.empresa){
        ctx.setState({company:response.data.empresa});
        ctx.getProducts();
        ctx.verifyAuthentication();
      }
    }, function(error){
       Notification.error('HTTP Status: ' + error.response.status + ' - ' + error.response.data.mensagem);
    });
}

The problem is that when open page the render function is invoked before componentDidMount completed. Always returning function from else condition (renderNotValidateCompany) and returning renderValidateCompany after updating this.state.company.

render(){
    if(this.state.company){
      return this.renderValidateCompany();
    }else{
      return this.renderNotValidateCompany();
    }
}

Is it possible that rendering is called only when componentDidMount is completed in react?

Thanks!

componentDidMount means the component has mounted/rendered/inTheDOM/itstherealready — Mukesh Soni
– Mukesh Soni, Commented Aug 22, 2017 at 3:08
Cant you hold information about request in a state and render based on that information?this.state={requestCompleted:false} — Jan Ciołek
– Jan Ciołek, Commented Aug 22, 2017 at 3:09

Jan Ciołek · Accepted Answer · 2017-08-22 04:14:38Z

2

Like i said in a comment, store request status in the state and render based on it:

this.state = {
  company:null,
  requestCompleted:false,
}

And in render method:

render(){
 if(this.state.requestCompleted && this.state.company){
    return this.renderValidateCompany();
  }
 else if (this.state.requestCompleted){
    return this.renderNotValidateCompany();
  }
 else {
  return <LoadingGif />
  {/*or return null*/}
 }
}

Ofcourse update request status in the Promise.

edited Aug 22, 2017 at 4:14

answered Aug 22, 2017 at 3:25

Jan Ciołek

1,8163 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Renan Lalier Over a year ago

This causes a problem because the rendering function is being invoked and no value is returned. This is not allowed in React. What I'd like is that rendering is only invoked when componentDidMount is finished

Rick Lee Over a year ago

You can return an empty <div /> or some loading message if the requestCompleted is false.

Jan Ciołek Over a year ago

Loading gif added !

Renan Lalier Over a year ago

The problem is that I'm pre-processing page on the server to get meta-tag dynamics that I am loading through react-helmet in the renderValidateCompany function. Except when opening the page the renderNotValidateCompany function is executed and the meta tags are not loaded. This is my biggest reason for wanting the render function to be executed only when the componentDidMount request is complete

Jan Ciołek Over a year ago

Cant you remove request from componentDidMount?and mount that component if request is completed with your data?

Appunni M · Accepted Answer · 2017-08-22 04:33:41Z

I see that your problem is due to a slight delusion of how Javascript works.

your Requirement is :

step 1 : User Opens the component by navigating into it
step 2 : component is mounted
step 3 : componentDidMount is called and an asynchronous function is completed
step 4 : render function is called.

Think about this, step 3 is an Asynchronous step, which means it doesn't block anything else. Think about a PHP page, it has some data from server which you pass through variables, when you place the variable placeholder at right place the render is processed by server and final result is sent back. But here this is not the case, your html file is already here, we are talking about further updation over this. So blocking render function is not the model you are looking for.

What are the possible solutions for this ?

Render something intermediate ( loader ) in the meantime wait for state to get updated, when state gets updated the render is called upon with new state. @jan-ciolek has done that.
Move the API call up the ladder, meaning do not mount the component in the parent container until the data is retrieved. Basically the render won't be called unless there is success of this API call, you can create a container element just for this purpose. And then pass the data to the required component as props.
And if you are looking for a hack, you define a function returning empty div, and redefine the function to return the Component you require as the API call completes.As you do setState the component will be rendered again with new definition of the function.

Collectives™ on Stack Overflow

How to do render only after http request completed in ReactJS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related