This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch perf/use-deferred-value-bundle in repository https://gitbox.apache.org/repos/asf/superset.git
commit 3425de411b16de63c78bc5b6f4e6f7972f4b078e Author: Claude Code <[email protected]> AuthorDate: Fri May 8 11:13:11 2026 -0700 perf(explore): use useDeferredValue for explore menu search and JS editor parse Continues the React 18 useDeferredValue migration from #39928 / #39970. Refs #39890. Two more useDebounceValue → useDeferredValue swaps in the explore area: - useExploreAdditionalActionsMenu: dashboard search filter (300ms debounce → deferred). Input reads dashboardSearchTerm; useDashboardsMenuItems reads the deferred value. - JSEditorControl: ECharts options parser. The expensive safeParseEChartOptions call now reads a deferred value, so React schedules the parse as low-priority work and interrupts it on each keystroke instead of waiting on a fixed debounce window. Drop the no-longer-needed useDebounceValue mock in JSEditorControl.test — useDeferredValue returns the value synchronously without concurrent rendering pressure, so the passthrough mock is unnecessary. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> --- .../src/explore/components/controls/JSEditorControl.test.tsx | 4 ---- .../src/explore/components/controls/JSEditorControl.tsx | 9 ++++----- .../components/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,
