diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx index 81cb01fa7717..299c9fb00552 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx @@ -63,7 +63,8 @@ const FilterControls: FC = ({ dataMask: dataMaskSelected[filter.id], })); return buildCascadeFiltersTree(filtersWithValue); - }, [filterValues, dataMaskSelected]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [JSON.stringify(filterValues), dataMaskSelected]); const cascadeFilterIds = new Set(cascadeFilters.map(item => item.id)); const [filtersInScope, filtersOutOfScope] = useSelectFiltersInScope( diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx index 0ce0ad0c7245..dd0c56c864aa 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx @@ -29,7 +29,7 @@ import { getChartMetadataRegistry, } from '@superset-ui/core'; import { useDispatch, useSelector } from 'react-redux'; -import { areObjectsEqual } from 'src/reduxUtils'; +import { isEqual, isEqualWith } from 'lodash'; import { getChartDataRequest } from 'src/chart/chartAction'; import Loading from 'src/components/Loading'; import BasicErrorAlert from 'src/components/ErrorMessage/BasicErrorAlert'; @@ -105,10 +105,17 @@ const FilterValue: React.FC = ({ time_range, }); const filterOwnState = filter.dataMask?.ownState || {}; + // TODO: We should try to improve our useEffect hooks to depend more on + // granular information instead of big objects that require deep comparison. + const customizer = ( + objValue: Partial, + othValue: Partial, + key: string, + ) => (key === 'url_params' ? true : undefined); if ( !isRefreshing && - (!areObjectsEqual(formData, newFormData) || - !areObjectsEqual(ownState, filterOwnState) || + (!isEqualWith(formData, newFormData, customizer) || + !isEqual(ownState, filterOwnState) || isDashboardRefreshing) ) { setFormData(newFormData);