Share
Tweet
Share
Share

Problem

While working on a SharePoint Framework (SPFx) webpart I noticed some odd performance issues… My SPFx webpart was very slow to initially load.

I was initially a bit puzzled by this however after some investigation I discovered the below solution.

SharePoint Logo

Solution

Well it turns out that if you are using asynchronous rendering (i.e. Render function is marked Async) then you’ll need to add some additional code to notify SharePoint Framework when the asynchronous method has finished, otherwise it’ll wait an extended period of time.

This is what I was missing and caused the delayed webpart load time performance issue. See yellow highlighted code below. After implementing the below solution, the performance issue was resolved.


  protected get isRenderAsync(): boolean {
    return true;
  }
  
  protected renderCompleted(): void {
    super.renderCompleted();
  }

  public async render(): Promise {
    const data = await doSomethingAsync();
  
    const element: React.ReactElement = React.createElement(
      MyWebPart,
      {
        description: this.properties.description,
        myData, data
      }
    );

    ReactDom.render(element, this.domElement);

    // async rendering completed
    this.renderCompleted();
  }

Additional References

You can find additional information about the above solution at the below links

Final Thoughts

I hope you’ve found this solution useful. If you have any other tips or suggestions, please share them below.

Shane Bartholomeusz
Latest posts by Shane Bartholomeusz (see all)
Share
Tweet
Share
Share