SPFx Web Part Property Pane refreshes web part on every keystroke

Question

I'm using the example "Hello World" code as a basis for my web part.

I added two fields to the property pane.

I see the fields in the property pane when I edit the web part, but it refreshes my web part on every keystroke. My web part makes some REST API calls and it makes it incredibly slow to type anything into the property pane - and sometimes the constant refresh causes API errors (my issue). It's about unusable.

I assume that it's because the property pane is using React? Is there any way to have it not do that? All I have are two simple textboxes! I don't need every keystroke entered into the fields.

Answer 1

You have to override disableReactivePropertyChanges method for this scenario.

---

The property pane has two interaction modes:

• Reactive
• Non-reactive

In reactive mode, on every change on a field control in the property pane triggers the change event. The reactive behavior automatically updates the web part's property with the new values. The reactive mode is the default mode for web parts.

While reactive mode is sufficient for many scenarios, at times you need non-reactive behavior. Non-reactive doesn't update the web part automatically unless the user confirms the changes.

To turn on the non-reactive mode, add the following code in your web part:

protected get disableReactivePropertyChanges(): boolean {
  return true;
}

Documentation: SPFx property pane - Handle field changes