react: передача из функционального компонента несколько состояний вовне
есть функциональный компонент (отображающий некоторые элементы управления), принимающий на вход два параметра param1
, param2
и колбэк onChange
, по которому возвращаются обновлённые параметры.
если передачу параметров делать сразу после изменения параметров:
[param1, setParam1] = useState(props.param1)
[param2, setParam2] = useState(props.param2)
const handleChangeParam1 = (newParam) => {
setParam1(newParam);
props.onChange({
param1: param1,
param2: param2
});
}
то в onChange
передаётся старый param1
, что понятно, поскольку setParam1
не гарантирует изменение param1
сразу.
Каким образом тогда можно добиться того, чтоб по onChange
всегда передавались ТОЛЬКО актуальные параметры?
конечно можно использовать newParam
, получаемый в колбэке:
const handleChangeParam1 = (newParam) => {
setParam1(newParam);
props.onChange({
param1: newParam,
param2: param2
});
}
но когда передаваемых состояний много, то для каждого изменения состояния писать такой код - не очень универсальное решение :(
Если же использовать useEffect
:
const handleChangeParam1 = (newParam) => {
setParam1(newParam);
}
useEffect(() => {
props.onChange({
param1: newParam,
param2: param2
});
}, [props, param1, param2]);
то всё работает, все универсально, но возникает ошибка многократного вызова:
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
подскажите как корректно можно реализовать данный функционал и откуда берется эти многократные вызовы?
понимаю, что похоже из-за цепочки [новое значение] -> [установка состояния] -> [вызов эффекта] -> [передача данных вовне] -> [выставление из данных, переданных вовне пропсов для компонента] -> [установка состояния]...
но я думал, что вызов будет ровно 1, дальше Реакт поймёт, что значения (props) не менялись и не будет перерисовывать постоянно компоненты