onBeforeSerialize method constantly called when the page is in Edit Mode

[ynot3363]

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
• [X] 💥 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

• Edge browser version: 125.0.2535.37
• SPFx version: 1.18.2
• Node.js version: 18.20.1

Describe the bug / error

The onBeforeSerialize method appears to constantly be called when the SharePoint page is simply in Edit Mode but no changes are being made.

Here is a sample repo to reproduce the error: https://github.com/ynot3363/onBeforeSerializeIssue

Here is the method I implemented to test: protected override onBeforeSerialize(): void { console.log(new Date().toLocaleString()); }

Steps to reproduce

1. Fork & clone repo: https://github.com/ynot3363/onBeforeSerializeIssue
2. npm install
3. gulp serve --nobrowser
4. Create a new page on your SharePoint site
5. Append the ?debug query string to the URL
6. Add the Hello World Web Part

Expected behavior

I expect this method to only be called when properties are changed and/or the page is being saved.

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint

https://learn.microsoft.com/en-us/javascript/api/sp-webpart-base/basewebpart?view=sp-typescript-latest#@microsoft-sp-webpart-base-basewebpart-onbeforeserialize-member(1)