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 <justin.park@airbnb.com>
---
 .../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<any, string[] | undefined>(
     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<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(() => {
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: {},