mirror of https://github.com/apache/superset.git
fix(nativeFilters): Speed up native filters by removing unnecessary rerenders (#25282)
Co-authored-by: JUST.in DO IT <justin.park@airbnb.com>
This commit is contained in:
parent
ba5e2f634a
commit
a0eeb4d767
|
@ -58,6 +58,7 @@ export enum AppSection {
|
||||||
export type FilterState = { value?: any; [key: string]: any };
|
export type FilterState = { value?: any; [key: string]: any };
|
||||||
|
|
||||||
export type DataMask = {
|
export type DataMask = {
|
||||||
|
__cache?: FilterState;
|
||||||
extraFormData?: ExtraFormData;
|
extraFormData?: ExtraFormData;
|
||||||
filterState?: FilterState;
|
filterState?: FilterState;
|
||||||
ownState?: JsonObject;
|
ownState?: JsonObject;
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { shallowEqual, useSelector } from 'react-redux';
|
||||||
import {
|
import {
|
||||||
DataMaskStateWithId,
|
DataMaskStateWithId,
|
||||||
ensureIsArray,
|
ensureIsArray,
|
||||||
|
@ -32,6 +32,7 @@ export function useFilterDependencies(
|
||||||
): ExtraFormData {
|
): ExtraFormData {
|
||||||
const dependencyIds = useSelector<any, string[] | undefined>(
|
const dependencyIds = useSelector<any, string[] | undefined>(
|
||||||
state => state.nativeFilters.filters[id]?.cascadeParentIds,
|
state => state.nativeFilters.filters[id]?.cascadeParentIds,
|
||||||
|
shallowEqual,
|
||||||
);
|
);
|
||||||
return useMemo(() => {
|
return useMemo(() => {
|
||||||
let dependencies = {};
|
let dependencies = {};
|
||||||
|
|
|
@ -18,7 +18,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* eslint-disable no-param-reassign */
|
/* 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 { useDispatch, useSelector } from 'react-redux';
|
||||||
import {
|
import {
|
||||||
DataMaskStateWithId,
|
DataMaskStateWithId,
|
||||||
|
@ -144,6 +150,8 @@ const FilterBar: React.FC<FiltersBarProps> = ({
|
||||||
|
|
||||||
const [filtersInScope] = useSelectFiltersInScope(nativeFilterValues);
|
const [filtersInScope] = useSelectFiltersInScope(nativeFilterValues);
|
||||||
|
|
||||||
|
const dataMaskSelectedRef = useRef(dataMaskSelected);
|
||||||
|
dataMaskSelectedRef.current = dataMaskSelected;
|
||||||
const handleFilterSelectionChange = useCallback(
|
const handleFilterSelectionChange = useCallback(
|
||||||
(
|
(
|
||||||
filter: Pick<Filter, 'id'> & Partial<Filter>,
|
filter: Pick<Filter, 'id'> & Partial<Filter>,
|
||||||
|
@ -154,19 +162,19 @@ const FilterBar: React.FC<FiltersBarProps> = ({
|
||||||
if (
|
if (
|
||||||
// filterState.value === undefined - means that value not initialized
|
// filterState.value === undefined - means that value not initialized
|
||||||
dataMask.filterState?.value !== undefined &&
|
dataMask.filterState?.value !== undefined &&
|
||||||
dataMaskSelected[filter.id]?.filterState?.value === undefined &&
|
dataMaskSelectedRef.current[filter.id]?.filterState?.value ===
|
||||||
|
undefined &&
|
||||||
filter.requiredFirst
|
filter.requiredFirst
|
||||||
) {
|
) {
|
||||||
dispatch(updateDataMask(filter.id, dataMask));
|
dispatch(updateDataMask(filter.id, dataMask));
|
||||||
}
|
}
|
||||||
|
|
||||||
draft[filter.id] = {
|
draft[filter.id] = {
|
||||||
...(getInitialDataMask(filter.id) as DataMaskWithId),
|
...(getInitialDataMask(filter.id) as DataMaskWithId),
|
||||||
...dataMask,
|
...dataMask,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[dataMaskSelected, dispatch, setDataMaskSelected],
|
[dispatch, setDataMaskSelected],
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -56,6 +56,7 @@ export function getInitialDataMask(
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
...otherProps,
|
...otherProps,
|
||||||
|
__cache: {},
|
||||||
extraFormData: {},
|
extraFormData: {},
|
||||||
filterState: {},
|
filterState: {},
|
||||||
ownState: {},
|
ownState: {},
|
||||||
|
|
Loading…
Reference in New Issue