Theme changed event calls render before onInit

[SharePickle]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• Chrome 140.0.7339.81 (Official Build) (64-bit)
• 1.21.1
• 18.18.1

Describe the bug / error

When refreshing the page in Edit mode, render is called before onInit and theme changed event is being called multiple times. I think these issues are linked #10413

eval	@	VM2488:1
render	@	CustomWebPart.ts:93
i._internalHandleThemeChangedEvent	@	sp-pages-assembly_en…0cc25137d4d7.js:299
(anonymous)	@	sp-pages-assembly_en…00cc25137d4d7.js:23
e._raiseEventInternal	@	sp-pages-assembly_en…00cc25137d4d7.js:23
e.raiseEvent	@	sp-pages-assembly_en…00cc25137d4d7.js:23
e._raiseEvent	@	sp-pages-assembly_en…0cc25137d4d7.js:275
e._setTheme	@	sp-pages-assembly_en…0cc25137d4d7.js:275 // <------ this triggers theme changed event

Steps to reproduce

1. Open page in Edit mode
2. Refresh the page
3. render method is called before onInit completes

Expected behavior

render is not called before onInit.

[Ashlesha-MSFT]

Hello @SharePickle,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[SharePickle]

Here's the snippet you could use to test it:

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  public render(): void {
    console.log('!!! render !!!');
  }

  protected async onInit(): Promise<void> {
    console.log('!!! onInit start !!!');
    await new Promise(resolve => setTimeout(resolve, 3000));
    console.log('!!! onInit finish !!!');
  }

  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
    console.log('!!! onThemeChanged !!!');
  }
  
}

Steps to reproduce (sometimes it takes multiple attempts before reproducing):

1. Open page in Read mode.
2. Wait ~5 seconds
3. Close browser tab
4. Re-open browser tab (CTRL+SHIFT+T)
5. Open console to see logs

You will see something like this:

Notice how there are multiple renders in between onInit start log and onInit finish log.

[Ashlesha-MSFT]

@SharePickle,
thanks for the detailed repro.
As a temporary workaround, you can add a flag (e.g., _isInitialized) to prevent render() from executing before onInit() completes — this ensures the component only renders after it's fully initialized. I've tested this and it avoids the issue.
I’ll go ahead and raise a bug with engineering team for this unexpected lifecycle behavior so it can be addressed properly. Will keep you posted if I get any updates.