[superset] 06/08: fix(nativeFilters): Speed up native filters by removing unnecessary rerenders (#25282)

[michaelsmolina]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch 3.0
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 7b2b696a19ca29238bc06714921e6cd15f553bc9
Author: Stepan <66589759+always-p...@users.noreply.github.com>
AuthorDate: Thu Sep 28 15:37:19 2023 +0300

    fix(nativeFilters): Speed up native filters by removing unnecessary 
rerenders (#25282)
    
    Co-authored-by: JUST.in DO IT <justin.p...@airbnb.com>
    (cherry picked from commit a0eeb4d767df9f573d80b520cf8afe42013616bb)
---
 .../packages/superset-ui-core/src/chart/types/Base.ts    |  1 +
 .../nativeFilters/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 b3884a8488..1c4d278f6c 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 a710281459..bb5b5c2672 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 fe3a8e21d2..546742c6dd 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 f2163a54a4..6e9a5fae54 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: {},