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.
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
- Github Issue – https://github.com/SharePoint/sp-dev-docs/issues/1332#issuecomment-387973106
- Microsoft Documentation – https://docs.microsoft.com/en-us/javascript/api/sp-webpart-base/baseclientsidewebpart?view=sp-typescript-latest#rendercompleted–
Final Thoughts
I hope you’ve found this solution useful. If you have any other tips or suggestions, please share them below.
This blog is my place to share my thoughts, helpful solutions and just random nerdy stuff.
Leave a Reply