Sp-dev-docs: SPFx - isRenderAsync + renderCompleted - How To?

[everettcomstock]

Category

• [ X] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Overriding the BaseClientSideWebPart isRenderAsync property will lead to the calling of the renderCompleted method.

One note, I am unsure when the renderCompleted method will be called. My assumption is that it will be called after the Render method, but I have not found a concrete guide for the SPFx web part event lifecycle.

Observed Behavior

Overriding the isRenderAsync property using the following syntax seems to fail:

get isRenderAsync() {
return true;
}

The renderCompleted method is not called.

Steps to Reproduce

Override the isRenderAsync property and the renderCompleted method:

get isRenderAsync() {
return true;
}

protected renderCompleted(): void {
// Do stuff
}

Any guidance or suggestions will be greatly appreciated. Thanks!

[DominicArchual]

+1 More documentation or an explanation would be helpful.

[luismanez]

Agreed it needs clarification. In the meantime, I´ve done a quick test, and seems is your responsibility to call that method when your async operation is done. Maybe this code makes not great sense, but it works as would be expected:

public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        Loading...
      </div>`;

      this.context.httpClient.get("https://jsonplaceholder.typicode.com/posts/1", HttpClient.configurations.v1).then(data => {
        console.log(data);
        this.renderCompleted();
      });
  }

  protected renderCompleted(): void {
    console.log("renderCompleted");
    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        Hello World Completed
      </div>`;
  }

  protected get isRenderAsync(): boolean {
    return true;
  }

As I see in the BaseClientSideWebPart.js, there´s no any explicit call to the renderCompleted method, so I´m pretty sure you have to call it explicitly. Also, if you don´t call it, after some seconds, you can see a Log message in the console saying so.

[luismanez]

Just realised I forgot to call the parent renderCompleted method: super.renderCompleted() (otherwise the Timeout is not killed and you will get the error in the console after 25 seconds)...

protected renderCompleted(): void {
    super.renderCompleted();
    console.log("renderCompleted");
    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        ${this._data}
      </div>`;
  }

[everettcomstock]

Luis,
Thank you for the reply. I agree with your analysis and ultimately created a solution similar to what you've suggested. I now only ask that the SPFx team to add some specific guidance on the matter to help other dev's on their journey :)

[msft-github-bot]

This issue is being closed as part of an issue list cleanup project. Issues with no activity in the past 6 months that aren't tracked by engineering as bugs were closed as part of this inititive. If this is still an issue, please follow the steps outlined to re-open the issue.