Реакт компонент принимает настройки settings, эти настройки родительский компонент принимает

от АПИ и ему передает.
На основании этих настроек инициализируются переменные period, updateInterval и тд и в карточке отображаются свитчеры либо в выпадашке нужные опции проставляются в зависимости от этих переменных.
Юзер потом может переключать свитчеры и тд и тогда на сервер отправляются новые настройки с помощью функции saveSettings, для этого я в useEffect добавил нужные зависимости [period, updateInterval, includeEvents, chartType].
Проблема в том, что при инициализации компонента useEffect срабатывает и на сервер отсылаются настройки, что не нужно делать.

Я решил проблему добавив isInit флаг, но это лажа какая-то.
Можно ли проблему решить без этого дурацкого флага?
Что можно попытаться сделать?

export function Card({settings, saveSettings}) {
const {
period: periodFromBackend,
updateInterval: updateIntervalFromBackend,
includeEvents: includeEventsFromBackend,
chartType: chartTypeFromBackend,
} = settings
const [period, setPeriod] = useState(periodFromBackend);
const [updateInterval, setUpdateInterval] = useState(updateIntervalFromBackend);
const [includeEvents, setIncludeEvents] = useState(includeEventsFromBackend);
const [chartType, setChartType] = useState(chartTypeFromBackend);

const [isInit, setIsInit] = useState(true);

useEffect(() => {
if (!isInit) {
saveSettings({ // отсылаются настройки
includeEvents,
period,
updateInterval,
chartType,
})
} else {
setIsInit(false)
}
}, [period, updateInterval, includeEvents, chartType]);


return (
// JSX
)
}

useCallback?

Заведи ref со счётчиком рендеров. Он не будет влиять на перерисовку, и на него можно ориентироваться. Если я правильно понял проблему.

зачем тебе тут вообще useEffect? В данном случае достаточно onClick = {() => {saveSettings({ // отсылаются настройки includeEvents, period, updateInterval, chartType, })}}

во все внутренние компоненты все настройки и саму функцию saveSettings пропдриллингом тогда передавать придется

Зачем?

а как тогда компонент на котором клик сработает будет знать все остальные настройки кроме своего поля?

Скинь полный код, с jsx я тебе покажу

export function Card({settings, saveSettings}) { const { period: periodFromBackend, updateInterval: updateIntervalFromBackend, includeEvents: includeEventsFromBackend, chartType: chartTypeFromBackend, dashboardType, visible } = settings const [period, setPeriod] = useState(periodFromBackend); const [updateInterval, setUpdateInterval] = useState(updateIntervalFromBackend); const [includeEvents, setIncludeEvents] = useState(includeEventsFromBackend); const [chartType, setChartType] = useState(chartTypeFromBackend); const isFirstRender = useRef(true); useEffect(() => { if (isFirstRender?.current) { isFirstRender.current = false; return; } }, [period, updateInterval, includeEvents, chartType]); return ( <Paper> <div className={classes.dashboardBlockHeader} > <span className={classes.dashboardTitle}>{t(`BUILD-DASHBOARD-TYPE.${dashboardType}`)}</span> <div className={classes.cardButtonsContainer}> <Switch checked={!!includeEvents} onChange={() => setIncludeEvents(includeEvents => !includeEvents)} color="primary" /> <span className={classes.switchLabel} onClick={() => setIncludeEvents(includeEvents => !includeEvents)} > События </span> <Divider orientation="vertical" className={classes.verticalDivider}/> <div className={classes.deleteButton}> <RemoveIcon/> </div> </div> </div> <Divider/> <div className={classes.dashboardBlockSettings}> <DashboardDropdown label={"Период:"} selectedValue={period} setSelectedValue={setPeriod} options={[ {label: "3 часа", value: 180}, {label: "6 часов", value: 360}, {label: "12 часов", value: 720}, {label: "24 часа", value: 1440}, {label: "3 суток", value: 4320}, {label: "1 неделя", value: 10080}, {label: "2 недели", value: 20160}, {label: "1 месяц", value: 43200} ]} /> <DashboardDropdown label={"Частота обновления:"} selectedValue={updateInterval} setSelectedValue={setUpdateInterval} options={[ {label: "1 Минута", value: 1}, {label: "5 Минут", value: 5}, {label: "10 Минут", value: 10}, {label: "30 Минут", value: 30}, {label: "1 Час", value: 60}, ]} /> {!!chartType && ( <DashboardDropdown label={"Тип графика:"} selectedValue={chartType} setSelectedValue={setChartType} options={[ {label: "Pie Chart", value: "PieChart"}, {label: "Horizontal Bar Chart", value: "HorizontalBarChart"}, {label: "Vertical Bar Chart", value: "VerticalBarChart"}, {label: "Stacket vertical bar chart", value: "StackedVerticalBarChart"}, {label: "Line chart", value: "LineChart"}, {label: "Grouped vertical bar chart", value: "GroupedVerticalBarChart"}, ]} /> )} </div> <Divider/> <Chart dashboardType={dashboardType} organizationId={organizationId} includeEvents={includeEvents} updateInterval={updateInterval} period={period} /> </Paper> ) }

Ты ант используешь?

MUI