fix(nativeFilters): Speed up native filters by removing unnecessary rerenders (#25282)

Co-authored-by: JUST.in DO IT <justin.park@airbnb.com>

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;

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<any, string[] | undefined>(
     state => state.nativeFilters.filters[id]?.cascadeParentIds,
+    shallowEqual,
   );
   return useMemo(() => {
     let dependencies = {};

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<FiltersBarProps> = ({
 
   const [filtersInScope] = useSelectFiltersInScope(nativeFilterValues);
 
+  const dataMaskSelectedRef = useRef(dataMaskSelected);
+  dataMaskSelectedRef.current = dataMaskSelected;
   const handleFilterSelectionChange = useCallback(
     (
       filter: Pick<Filter, 'id'> & Partial<Filter>,
@@ -154,19 +162,19 @@ const FilterBar: React.FC<FiltersBarProps> = ({
         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(() => {

superset-frontend/src/dataMask/reducer.ts

@@ -56,6 +56,7 @@ export function getInitialDataMask(
   }
   return {
     ...otherProps,
+    __cache: {},
     extraFormData: {},
     filterState: {},
     ownState: {},