Как обрабатывать изменения DateRange с помощью useEffect

Question

В моем приложении React я также использую Redux. В этом сценарии задействованы три UI \ файла.

1) Панель инструментов - это главная страница, на которой открывается компонент «Фильтр». Эта страница также содержит компонент таблицы. Возможность контролировать, какую таблицу отображать, основана на параметрах компонента Filter.

const Table = () => {
    if (reportCode === 0) {
        return <SwapSummary />
    }
    if (reportCode === 1) {
        return <MonthlyTrending openDrawer={openDrawer} />
    }
}

<Drawer open={openDrawer} onClose={toggleDrawer(false)}>
            <div className={classes.drawerHeader}>
                <IconButton onClick={toggleDrawer(false)}>
                    <ChevronLeftIcon />
                </IconButton>
            </div>
            <Divider />
            <DashboardFilterList
                setOpen={setOpenDrawer}
                reportValue={reportCode}
                setReportValue={setReportCode} />
        </Drawer>
        <Table />

2) Filter (Drawer) - Этот компонент содержит выбранное меню для выбора различных Таблицы. Он также имеет компонент DataRange внутри диалога и кнопку Отправить.

const dateRangeData = useSelector(state => state.dateRange.data);
const [dateRange, setDateRange] = useState([
    {
        startDate: dateRangeData[0] ? dateRangeData[0].startDate : new Date(),
        endDate: dateRangeData[0] ? dateRangeData[0].endDate : null,
        key: 'selection'
    }
]);
// date change
const storeDateRange = useCallback(() => { dispatch(monthlyTrendingAction.setRangeDate(dateRange[0])) }, [dispatch, dateRange]);
useEffect(() => { storeDateRange() }, [storeDateRange]);

           <ListItem>
                    <Button
                        variant="outlined"
                        color="primary"
                        fullWidth={true}
                        startIcon={<DateRangeIcon />}
                        onClick={handleOpenCalendar}>Date Range</Button>
                    <Dialog
                        open={openCalendar}
                        onClose={handleCloseCalendar}>
                        <DialogContent>
                            <DateRange
                                editableDateInputs={true}
                                moveRangeOnFirstSelection={false}
                                ranges={dateRangeData}
                                onChange={item => setDateRange([item.selection])}
                            />
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={handleCloseCalendar} autoFocus color="primary">Ok</Button>
                        </DialogActions>
                    </Dialog>
                </ListItem> : ''}
            <ListItem>
                <Button
                    style={{ textTransform: 'capitalize' }}
                    variant="outlined"
                    color="primary"
                    fullWidth={true}
                    onClick={onClick}>Submit
                 </Button>
            </ListItem>

3) Таблица - Этот компонент будет извлекать данные из БД на основе значения фильтрации (диапазон данных).

const dateRangeData = useSelector(state => state.dateRange.data);
const dispatch = useDispatch();
const findMonthlyTrending = useCallback(() => {
    console.log('Run only when draw is closed and dates are diffrent')
    if (props.openDrawer && dateRangeData[0] && dateRangeData[0].endDate) {
        dispatch(monthlyTrendingAction.findMonthlyTrending(
            moment(dateRangeData[0].startDate).format('L'),
            moment(dateRangeData[0].endDate).format('L')))
    }
}, [dispatch, props.openDrawer, dateRangeData]);
useEffect(() => { findMonthlyTrending() }, [findMonthlyTrending]);

const monthlyTrendingData = useSelector(state => state.monthlyTrending.data);
const isLoadingmonthlyTrending = useSelector(state => 
state.monthlyTrending.isLoading);

Поскольку я управляю DateRange через хранилище, то для каждого изменения (onChange) в диапазоне дат будет вызываться БД.

Чего я пытаюсь достичь: Я хотел бы отправить вызов Rest в БД, только когда пользователь отправляет параметры фильтрации и фильтр закрыт (ящик закрыт), а затем go на DB. Также, если пользователь не обновил \ не изменил диапазон дат, тогда не переводите go в БД.

Поскольку я передаю состояние фильтра (ящика) openDrawer дочерней таблице, у меня есть некоторый контроль над вызовом БД, но я не могу понять, как обрабатывать сценарий DateRange. Как узнать, был ли выбран другой диапазон дат пользователем (предыдущее состояние)? Как я могу заблокировать onChange от инициирования вызова в БД?

Надеюсь, у меня все ясно. Я ценю вашу помощь, ребята.

Спасибо