Sp-dev-docs: Render method called many times

[will101]

Hi, I have an issue where the render method is called many times on a page that has an spfx webpart on it - this usually happens when navigating to a page from a hero webpart.

Category

• [x ] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

When navigating to a page with a webpart on it from a hero , I expect the spfx webpart on a page to be rendered once.

Observed Behavior

The page I navigated to, will usually be rendered twice, if not more - the most I've seen is 4 times.This happens pretty consistently.

Steps to Reproduce

1. Make a new spfx webpart, select no JS framework, don't add any code into it
2. Add a console.log to the render method: console.log("Rendered!");
3. Run gulp bundle, then gulp package-solution
4. Upload web part to your app catalog, install it on your site, then run gulp serve --nobrowser
5. Add a hero webpart to the home page, make another page with your web part on it
6. Add a link to the hero to your new page
7. Click the link in the hero web part and see how many times your console.log output is displayed

Example code in render:

``` public render(): void { this.domElement.innerHTML =

Welcome to SharePoint!

Customize SharePoint experiences using Web Parts.

${escape(this.properties.description)}

Learn more

`;
console.log("I rendered!");
}
```

`

Example output in console:

It seems that if you navigate to the page the web part is on directly , it only renders once, if you go to the page from a link in the menu, it renders usually twice , and if you go there from a hero it will render usually 2 -4 times. Is this desired behaviour, or am I missing something?

[GrahamMcMynn]

Unfortunately we do not guarantee that render will only get called once. You should not rely on a single render. However, we will look into this and try to understand why render is called multiple times, but please don't rely on that.

[will101]

Ok thanks, how do you reccomend on dealing with multiple renders and not duplicating output?
Thanks :)

[andrewconnell]

@will101 use the BaseClientSideWebPart.renderedOnce property on the base webpart:

  public render(): void {
    if (!this.renderedOnce) {
      this.domElement.innerHTML = `bla bla bla`;
    }
  }

[will101]

Ahhhh that's a really good idea, thank you sir!

[andrewconnell]

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues