perf(datasource-editor): fix typing lag and scrambling in form fields

Typing into any Dataset Editor text field (Settings → Basic Description,
column descriptions, metric labels, SQL expressions) was visibly slow on
realistic datasets because every keystroke re-rendered all seven tabs'
contents and ran synchronous O(n) validation inside the setState
callback. On fast typing or East-Asian IME input, characters landed in
the DOM in the order renders finished rather than the order typed,
manifesting as "scrambled" input. See sc-104866 for the full diagnosis.

Four coordinated changes in two files:

1. Debounce validate + flush on blur. Validation (duplicate-name checks,
   currency format, folder consistency) is moved off the keystroke hot
   path via lodash debounce (300 ms window). A new flushValidation method
   is exposed as onBlur on the DatasourceContainer wrapper so focus
   leaving any field flushes pending validation synchronously, keeping
   the Save-button error gate accurate (errors.length > 0 disables save).
   componentWillUnmount cancels the pending invocation to avoid
   setState-on-unmounted warnings.

2. Lazy-mount hidden tabs via destroyInactiveTabPane so only the visible
   tab's children are mounted. Eliminates the largest source of
   per-keystroke render cost on wide datasets where ColumnCollectionTable
   and MetricsTab would otherwise re-render on every setState.

3. Memoise derived arrays (sortedMetrics, datetimeColumns, stringColumns)
   with one-pair (lastInput, lastOutput) caches so downstream
   PureComponent / React.memo children stop re-rendering on unrelated
   state changes. Also hoist three inline itemGenerator={() => ({...})}
   lambdas to stable class-field arrow functions (newSpatialItem,
   newMetricItem, newCalculatedColumnItem).

4. IME composition guards in TextAreaControl. Track isComposing state via
   onCompositionStart / onCompositionEnd, skip handleChange while
   composing, propagate once on compositionend. Reduces per-IME-word
   work from N candidate events to one commit. Also converts handleChange
   to an arrow class field so onChange={this.handleChange} has stable
   identity across renders (no more .bind(this) in render).

Validation semantics are preserved (FR-008): same validators, same error
messages, same Save-button gate — only the schedule changes.

Existing 34 Jest tests across DatasourceEditor, DatasourceEditorCurrency,
and TextAreaControl pass unmodified. Playwright coverage for SC-001,
SC-003, and SC-005 deferred to a follow-up commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Mike Bridge

superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx

@@ -18,6 +18,7 @@
  */
 import rison from 'rison';
 import { PureComponent, useCallback, type ReactNode } from 'react';
+import { debounce } from 'lodash';
 import { connect, ConnectedProps } from 'react-redux';
 import type { JsonObject } from '@superset-ui/core';
 import { type SupersetTheme } from '@apache-superset/core/theme';
@@ -895,6 +896,25 @@ class DatasourceEditor extends PureComponent<
 
   private abortControllers: AbortControllers;
 
+  private debouncedValidateAndChange!: ReturnType<typeof debounce<() => void>>;
+
+  private _sortedMetricsCache: {
+    input: Metric[];
+    output: Metric[];
+  } | null = null;
+
+  private _datetimeColumnsCache: {
+    dbCols: Column[];
+    calcCols: Column[];
+    output: { value: string; label: string }[];
+  } | null = null;
+
+  private _stringColumnsCache: {
+    dbCols: Column[];
+    calcCols: Column[];
+    output: { value: string; label: string }[];
+  } | null = null;
+
   static defaultProps = {
     onChange: () => {},
     setIsEditing: () => {},
@@ -990,6 +1010,15 @@ class DatasourceEditor extends PureComponent<
     this.formatSql = this.formatSql.bind(this);
     this.fetchUsageData = this.fetchUsageData.bind(this);
     this.handleFoldersChange = this.handleFoldersChange.bind(this);
+
+    // Validation is moved off the keystroke hot path. A 300 ms window keeps
+    // feedback inside the typical between-word pause while letting React
+    // commit each keystroke's state update without blocking on O(n)
+    // duplicate/currency/folder checks.
+    this.debouncedValidateAndChange = debounce(
+      () => this.validate(this.onChange),
+      300,
+    );
   }
 
   onChange() {
@@ -1081,9 +1110,13 @@ class DatasourceEditor extends PureComponent<
   }
 
   validateAndChange() {
-    this.validate(this.onChange);
+    this.debouncedValidateAndChange();
   }
 
+  flushValidation = () => {
+    this.debouncedValidateAndChange.flush();
+  };
+
   async onQueryRun() {
     const databaseId = this.state.datasource.database?.id;
     const { sql } = this.state.datasource;
@@ -1464,21 +1497,56 @@ class DatasourceEditor extends PureComponent<
     );
   }
 
-  renderDefaultColumnSettings() {
-    const { datasource, databaseColumns, calculatedColumns } = this.state;
-    const { theme } = this.props;
-    const allColumns = [...databaseColumns, ...calculatedColumns];
+  // Cached getters for derived arrays. Each returns a stable reference while
+  // its inputs' identities are unchanged, so downstream PureComponent /
+  // React.memo children stop re-rendering on unrelated state changes.
+
+  getSortedMetrics(metrics: Metric[] | undefined): Metric[] {
+    const safeMetrics = metrics ?? [];
+    if (this._sortedMetricsCache?.input === safeMetrics) {
+      return this._sortedMetricsCache.output;
+    }
+    const output = safeMetrics.length
+      ? [...safeMetrics].sort(
+          ({ id: a }: { id?: number }, { id: b }: { id?: number }) =>
+            (b ?? 0) - (a ?? 0),
+        )
+      : [];
+    this._sortedMetricsCache = { input: safeMetrics, output };
+    return output;
+  }
 
-    // Get datetime-compatible columns for the default datetime dropdown
-    const datetimeColumns = allColumns
+  getDatetimeColumns(
+    dbCols: Column[],
+    calcCols: Column[],
+  ): { value: string; label: string }[] {
+    if (
+      this._datetimeColumnsCache?.dbCols === dbCols &&
+      this._datetimeColumnsCache?.calcCols === calcCols
+    ) {
+      return this._datetimeColumnsCache.output;
+    }
+    const output = [...dbCols, ...calcCols]
       .filter(col => col.is_dttm)
       .map(col => ({
         value: col.column_name,
         label: col.verbose_name || col.column_name,
       }));
+    this._datetimeColumnsCache = { dbCols, calcCols, output };
+    return output;
+  }
 
-    // String columns + untyped calculated columns for the currency code dropdown
-    const stringColumns = allColumns
+  getStringColumns(
+    dbCols: Column[],
+    calcCols: Column[],
+  ): { value: string; label: string }[] {
+    if (
+      this._stringColumnsCache?.dbCols === dbCols &&
+      this._stringColumnsCache?.calcCols === calcCols
+    ) {
+      return this._stringColumnsCache.output;
+    }
+    const output = [...dbCols, ...calcCols]
       .filter(
         col =>
           col.type_generic === GenericDataType.String ||
@@ -1488,6 +1556,42 @@ class DatasourceEditor extends PureComponent<
         value: col.column_name,
         label: col.verbose_name || col.column_name,
       }));
+    this._stringColumnsCache = { dbCols, calcCols, output };
+    return output;
+  }
+
+  newSpatialItem = () => ({
+    name: t('<new spatial>'),
+    type: t('<no type>'),
+    config: null,
+  });
+
+  newMetricItem = () => ({
+    metric_name: t('<new metric>'),
+    verbose_name: '',
+    expression: '',
+  });
+
+  newCalculatedColumnItem = () => ({
+    column_name: t('<new column>'),
+    filterable: true,
+    groupby: true,
+    expression: t('<enter SQL expression here>'),
+    expanded: true,
+  });
+
+  renderDefaultColumnSettings() {
+    const { datasource, databaseColumns, calculatedColumns } = this.state;
+    const { theme } = this.props;
+
+    const datetimeColumns = this.getDatetimeColumns(
+      databaseColumns,
+      calculatedColumns,
+    );
+    const stringColumns = this.getStringColumns(
+      databaseColumns,
+      calculatedColumns,
+    );
 
     return (
       <DefaultColumnSettingsContainer data-test="default-column-settings">
@@ -1708,11 +1812,7 @@ class DatasourceEditor extends PureComponent<
           tableColumns={['name', 'config']}
           sortColumns={['name']}
           onChange={this.onDatasourcePropChange.bind(this, 'spatials')}
-          itemGenerator={() => ({
-            name: t('<new spatial>'),
-            type: t('<no type>'),
-            config: null,
-          })}
+          itemGenerator={this.newSpatialItem}
           collection={spatials ?? []}
           allowDeletes
           itemRenderers={{
@@ -2148,7 +2248,7 @@ class DatasourceEditor extends PureComponent<
   renderMetricCollection() {
     const { datasource, metricSearchTerm } = this.state;
     const { metrics } = datasource;
-    const sortedMetrics = metrics?.length ? this.sortMetrics(metrics) : [];
+    const sortedMetrics = this.getSortedMetrics(metrics);
     return (
       <div>
         <Input.Search
@@ -2271,11 +2371,7 @@ class DatasourceEditor extends PureComponent<
           collection={sortedMetrics}
           allowAddItem
           onChange={this.onDatasourcePropChange.bind(this, 'metrics')}
-          itemGenerator={() => ({
-            metric_name: t('<new metric>'),
-            verbose_name: '',
-            expression: '',
-          })}
+          itemGenerator={this.newMetricItem}
           itemCellProps={{
             expression: () => ({
               style: {
@@ -2349,10 +2445,13 @@ class DatasourceEditor extends PureComponent<
   render() {
     const { datasource, activeTabKey } = this.state;
     const { metrics } = datasource;
-    const sortedMetrics = metrics?.length ? this.sortMetrics(metrics) : [];
+    const sortedMetrics = this.getSortedMetrics(metrics);
 
     return (
-      <DatasourceContainer data-test="datasource-editor">
+      <DatasourceContainer
+        data-test="datasource-editor"
+        onBlur={this.flushValidation}
+      >
         {this.renderErrors()}
         <Alert
           css={theme => ({ marginBottom: theme.sizeUnit * 4 })}
@@ -2372,6 +2471,7 @@ class DatasourceEditor extends PureComponent<
           data-test="edit-dataset-tabs"
           onChange={this.handleTabSelect}
           defaultActiveKey={activeTabKey}
+          destroyInactiveTabPane
           items={[
             {
               key: TABS_KEYS.SOURCE,
@@ -2479,13 +2579,7 @@ class DatasourceEditor extends PureComponent<
                     showExpression
                     allowAddItem
                     allowEditDataType
-                    itemGenerator={() => ({
-                      column_name: t('<new column>'),
-                      filterable: true,
-                      groupby: true,
-                      expression: t('<enter SQL expression here>'),
-                      expanded: true,
-                    })}
+                    itemGenerator={this.newCalculatedColumnItem}
                   />
                 </StyledTableTabWrapper>
               ),
@@ -2627,6 +2721,8 @@ class DatasourceEditor extends PureComponent<
   componentWillUnmount() {
     this.isComponentMounted = false;
 
+    this.debouncedValidateAndChange.cancel();
+
     // Abort all pending requests
     Object.values(this.abortControllers).forEach(controller => {
       if (controller) controller.abort();

superset-frontend/src/explore/components/controls/TextAreaControl.tsx

@@ -101,13 +101,36 @@ class TextAreaControl extends Component<TextAreaControlProps> {
     | ReturnType<typeof debounce<(value: string) => void>>
     | undefined;
 
+  // East-Asian IMEs fire onChange per candidate character during composition.
+  // Suppressing them reduces the per-IME-word cost from N to 1; only the
+  // committed composition (on compositionend) propagates to the parent.
+  private isComposing = false;
+
   constructor(props: TextAreaControlProps) {
     super(props);
     if (props.debounceDelay && props.onChange) {
       this.debouncedOnChange = debounce(props.onChange, props.debounceDelay);
     }
   }
 
+  handleCompositionStart = () => {
+    this.isComposing = true;
+  };
+
+  handleCompositionEnd = (
+    e: React.CompositionEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    this.isComposing = false;
+    const target = e.target as HTMLTextAreaElement | HTMLInputElement;
+    if (target?.value != null) {
+      if (this.debouncedOnChange) {
+        this.debouncedOnChange(target.value);
+      } else {
+        this.props.onChange?.(target.value);
+      }
+    }
+  };
+
   componentDidUpdate(prevProps: TextAreaControlProps) {
     if (
       this.props.onChange !== prevProps.onChange &&
@@ -124,14 +147,17 @@ class TextAreaControl extends Component<TextAreaControlProps> {
     }
   }
 
-  handleChange(value: string | { target: { value: string } }) {
+  handleChange = (value: string | { target: { value: string } }) => {
+    // Skip intermediate IME candidate events. The final committed value is
+    // propagated once from handleCompositionEnd.
+    if (this.isComposing) return;
     const finalValue = typeof value === 'object' ? value.target.value : value;
     if (this.debouncedOnChange) {
       this.debouncedOnChange(finalValue);
     } else {
       this.props.onChange?.(finalValue);
     }
-  }
+  };
 
   componentWillUnmount() {
     if (this.debouncedOnChange) {
@@ -211,7 +237,7 @@ class TextAreaControl extends Component<TextAreaControlProps> {
             readOnly={readOnly}
             key={name}
             {...editorProps}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
           />
         </div>
       );
@@ -226,7 +252,9 @@ class TextAreaControl extends Component<TextAreaControlProps> {
       <div>
         <Input.TextArea
           placeholder={t('textarea')}
-          onChange={this.handleChange.bind(this)}
+          onChange={this.handleChange}
+          onCompositionStart={this.handleCompositionStart}
+          onCompositionEnd={this.handleCompositionEnd}
           defaultValue={this.props.initialValue}
           disabled={this.props.readOnly}
           style={{ height: this.props.height }}