SPFx header Application Customizer loaded multiple times

Question

SPFx header Application Customizer loaded multiple times while travel different pages

below is code :

/** A Custom Action which can be run during execution of a Client Side Application */
export default class AddingLogoApplicationCustomizer
extends BaseApplicationCustomizer<IAddingLogoApplicationCustomizerProperties> {

public onInit(): Promise<void> {
this.context.placeholderProvider.changedEvent.add(this, this.renderObserver);
Log.info(LOG_SOURCE, Initialized ${strings.Title});

let message: string = this.properties.testMessage;  
if (!message) {  
  message = '(No properties were provided.)';  
}  
return Promise.resolve();  

}

private _onDispose(): void { }
private async renderObserver(): Promise<void> {

let stringBilder = '<ul id="mainNavigation" class=' + styles.mainnavigation + '>';  
for (var i = 0; i < parent_Items.length; i++) {  
}  
stringBilder += "</ul>"  
let topPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, { onDispose: this._onDispose });  
// Handling the top placeholder  
if (!topPlaceholder) {  
  topPlaceholder = this.context.placeholderProvider.tryCreateContent(  
    PlaceholderName.Top,  
    { onDispose: this._onDispose }  
  );  
}  

if (topPlaceholder) {  
  topPlaceholder.domElement.innerHTML = "";  
  topPlaceholder.domElement.innerHTML = stringBilder;  
}  

}
}

Answer 1

Hi @Mukesh Ajmera ,

According to my research and testing, you can try to call the dispose() method manually, for example :

window.addEventListener('beforeunload', (_e) => {  
      this._topPlaceholder.dispose();  
    });  

Similar issue for reference:
SPFx header application customizer loaded multiple times when switching between sites

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---