From 2cc20d3284bd09af51e88ca87577e9be06f7599b Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Mon, 11 May 2026 09:48:07 -0700
Subject: [PATCH] perf(explore): use useDeferredValue for explore menu search
 and JS editor parse (#39975)

Co-authored-by: Claude Code <noreply@anthropic.com>
---
 .../components/controls/JSEditorControl.test.tsx      |  4 ----
 .../explore/components/controls/JSEditorControl.tsx   |  9 ++++-----
 .../useExploreAdditionalActionsMenu/index.tsx         | 11 ++++-------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/JSEditorControl.test.tsx b/superset-frontend/src/explore/components/controls/JSEditorControl.test.tsx
index 5a083702b94..34d121f291e 100644
--- a/superset-frontend/src/explore/components/controls/JSEditorControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/JSEditorControl.test.tsx
@@ -45,10 +45,6 @@ jest.mock('src/core/editors', () => ({
   ),
 }));
 
-jest.mock('src/hooks/useDebounceValue', () => ({
-  useDebounceValue: (value: string) => value,
-}));
-
 const defaultProps = {
   name: 'echartOptions',
   label: 'EChart Options',
diff --git a/superset-frontend/src/explore/components/controls/JSEditorControl.tsx b/superset-frontend/src/explore/components/controls/JSEditorControl.tsx
index 7cf4c252ac5..d0130b1ad96 100644
--- a/superset-frontend/src/explore/components/controls/JSEditorControl.tsx
+++ b/superset-frontend/src/explore/components/controls/JSEditorControl.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useMemo } from 'react';
+import { useDeferredValue, useMemo } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import ControlHeader, {
   ControlHeaderProps,
@@ -28,7 +28,6 @@ import {
   EChartOptionsParseError,
 } from '@superset-ui/plugin-chart-echarts';
 import { EditorHost } from 'src/core/editors';
-import { useDebounceValue } from 'src/hooks/useDebounceValue';
 
 const Container = styled.div`
   border: 1px solid ${({ theme }) => theme.colorBorder};
@@ -50,10 +49,10 @@ export default function JSEditorControl({
   onChange,
   value,
 }: ControlHeaderProps & ControlComponentProps<string>) {
-  const debouncedValue = useDebounceValue(value);
+  const deferredValue = useDeferredValue(value);
   const error = useMemo(() => {
     try {
-      safeParseEChartOptions(debouncedValue ?? '');
+      safeParseEChartOptions(deferredValue ?? '');
       return null;
     } catch (err) {
       if (err instanceof EChartOptionsParseError) {
@@ -61,7 +60,7 @@ export default function JSEditorControl({
       }
       throw err;
     }
-  }, [debouncedValue]);
+  }, [deferredValue]);
   const headerProps = {
     name,
     label: label ?? name,
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.tsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.tsx
index f4dc6b57af8..6b9e7b048de 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.tsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.tsx
@@ -19,13 +19,13 @@
 import React, {
   ReactElement,
   useCallback,
+  useDeferredValue,
   useMemo,
   useState,
   Dispatch,
   SetStateAction,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useDebounceValue } from 'src/hooks/useDebounceValue';
 import {
   isFeatureEnabled,
   FeatureFlag,
@@ -213,10 +213,7 @@ export const useExploreAdditionalActionsMenu = (
   const dispatch = useDispatch();
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [dashboardSearchTerm, setDashboardSearchTerm] = useState('');
-  const debouncedDashboardSearchTerm = useDebounceValue(
-    dashboardSearchTerm,
-    300,
-  );
+  const deferredDashboardSearchTerm = useDeferredValue(dashboardSearchTerm);
   const chart = useSelector<ExploreState, ChartState | undefined>(state =>
     state.explore ? state.charts?.[getChartKey(state.explore)] : undefined,
   );
@@ -304,7 +301,7 @@ export const useExploreAdditionalActionsMenu = (
   const dashboardMenuItems = useDashboardsMenuItems({
     chartId: slice?.slice_id,
     dashboards,
-    searchTerm: debouncedDashboardSearchTerm,
+    searchTerm: deferredDashboardSearchTerm,
   });
 
   const showDashboardSearch = (dashboards?.length ?? 0) > SEARCH_THRESHOLD;
@@ -1054,7 +1051,7 @@ export const useExploreAdditionalActionsMenu = (
     dashboards,
     dashboardMenuItems,
     dashboardSearchTerm,
-    debouncedDashboardSearchTerm,
+    deferredDashboardSearchTerm,
     datasource,
     dispatch,
     exportCSV,