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


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 {

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

    ReactDom.render(element, this.domElement);

    // async rendering completed

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