Implement RenderComplete in React SPFx Webpart

Issue -

One of our Modern SharePoint Project HomePage was taking a long time to load. We raise a ticket to Microsoft for same. To Identify the actual loading time of our web parts, Microsoft asks us to implement RenderComplete function in our custom web parts.


Analysis -

The main issue about the function implementation is it is not documented anywhere in any posts. So it was always trying and error situation. So if you are in the same situation, use below code reference to solve the issue.


Code Solution - To implement the functionality, open your code solution and in your web part, follow the below steps:

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

• Now open your web part.
• In your web part ts file, add below 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); 
   }
    protected renderCompleted(): void {
      super.renderCompleted();
    }
  
    protected get isRenderAsync(): boolean {
      return true;
    }

• Now open your web part tsx file and add below code in "componenetDidMouth" method.
  
  // Init Function of component mount
    public async componentDidMount() {
      //your code to get data
      this.props.asynccompfunc();
    }

once these changes are applied in your webpats, deploy package. Once your build is deployed, open the page where you have added you web part. Click "Cntr + F12". it will show the performance of your webpart in webpart tab.

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.