Performance issues with SPFx web parts [Solution: Fix it with implementing renderCompleted & isRenderAsync methods]

We mostly encounter performance related issues, like - Page takes very long time to load all features while working with highly customized SharePoint site. To identify performance issue of Custom SPFx web parts, Microsoft suggests to implement RenderCompleted method.

I searched over the internet but did not find any good documentation on how to implement it. After spending time on analysis & research, finally I was able to implement it successfully.

Here, I am providing you with detailed steps to implement renderCompleted & isRenderAsync methods to identify performance of custom webparts.

Solution - To implement such methods, open custom web part source code - solution in Visual studio.

• Open Interface file and add below property to it.
  asynccompfunc:() => void;

• Now, go to the ".ts" file of your custom webpart and add below highlighted code in "Render" Method.

          public render(): void

            {
               const element: React.ReactElement<ISubmitNewsProps> = React.createElement(                                 SubmitNews,

                 {
                    // other properties...,
                    asynccompfunc:this.renderCompleted
                  });

                ReactDom.render(element, this.domElement);   
            }

• Also, add below code after "Render" Method.

           protected renderCompleted(): void { 
                super.renderCompleted();   
           }

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

• Now open ".tsx" file and add below code in "componentDidMount" method.

         //Init Function of component mount 

           public async componentDidMount() {
           

            //your code

           

           this.props.asynccompfunc();
         }

After applying all changes in your web part, deploy package and open the page where you have added the webpart.

Click "Ctr + F12". to see the performance of your web part.

Note: This method requires "BaseClientSideWebPart" class to be extended. Application Customizer does not extend this class. So we cannot implement this method in Application Customizer.

If you have any questions you can reach out our SharePoint Consulting team here.