From a0eeb4d767df9f573d80b520cf8afe42013616bb Mon Sep 17 00:00:00 2001 From: Stepan <66589759+Always-prog@users.noreply.github.com> Date: Thu, 28 Sep 2023 15:37:19 +0300 Subject: [PATCH] fix(nativeFilters): Speed up native filters by removing unnecessary rerenders (#25282) Co-authored-by: JUST.in DO IT --- .../superset-ui-core/src/chart/types/Base.ts | 1 + .../FilterBar/FilterControls/state.ts | 3 ++- .../components/nativeFilters/FilterBar/index.tsx | 16 ++++++++++++---- superset-frontend/src/dataMask/reducer.ts | 1 + 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts index b3884a8488013..1c4d278f6cc46 100644 --- a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts +++ b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts @@ -58,6 +58,7 @@ export enum AppSection { export type FilterState = { value?: any; [key: string]: any }; export type DataMask = { + __cache?: FilterState; extraFormData?: ExtraFormData; filterState?: FilterState; ownState?: JsonObject; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts index a71028145969b..bb5b5c2672e28 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts @@ -17,7 +17,7 @@ * under the License. */ import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; +import { shallowEqual, useSelector } from 'react-redux'; import { DataMaskStateWithId, ensureIsArray, @@ -32,6 +32,7 @@ export function useFilterDependencies( ): ExtraFormData { const dependencyIds = useSelector( state => state.nativeFilters.filters[id]?.cascadeParentIds, + shallowEqual, ); return useMemo(() => { let dependencies = {}; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx index fe3a8e21d22b6..546742c6dd73b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx @@ -18,7 +18,13 @@ */ /* eslint-disable no-param-reassign */ -import React, { useEffect, useState, useCallback, createContext } from 'react'; +import React, { + useEffect, + useState, + useCallback, + createContext, + useRef, +} from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { DataMaskStateWithId, @@ -144,6 +150,8 @@ const FilterBar: React.FC = ({ const [filtersInScope] = useSelectFiltersInScope(nativeFilterValues); + const dataMaskSelectedRef = useRef(dataMaskSelected); + dataMaskSelectedRef.current = dataMaskSelected; const handleFilterSelectionChange = useCallback( ( filter: Pick & Partial, @@ -154,19 +162,19 @@ const FilterBar: React.FC = ({ if ( // filterState.value === undefined - means that value not initialized dataMask.filterState?.value !== undefined && - dataMaskSelected[filter.id]?.filterState?.value === undefined && + dataMaskSelectedRef.current[filter.id]?.filterState?.value === + undefined && filter.requiredFirst ) { dispatch(updateDataMask(filter.id, dataMask)); } - draft[filter.id] = { ...(getInitialDataMask(filter.id) as DataMaskWithId), ...dataMask, }; }); }, - [dataMaskSelected, dispatch, setDataMaskSelected], + [dispatch, setDataMaskSelected], ); useEffect(() => { diff --git a/superset-frontend/src/dataMask/reducer.ts b/superset-frontend/src/dataMask/reducer.ts index f2163a54a44a0..6e9a5fae5404a 100644 --- a/superset-frontend/src/dataMask/reducer.ts +++ b/superset-frontend/src/dataMask/reducer.ts @@ -56,6 +56,7 @@ export function getInitialDataMask( } return { ...otherProps, + __cache: {}, extraFormData: {}, filterState: {}, ownState: {},