I have a parent component PlannerWrapper that has the child components PlannerChart which returns an ApexChart instance and renders it to the DOM and another child component PlannerTools which takes some form inputs and updates the existing chart instance.
I want to update the chart always on change of a form input which somehow works but it doesn't use the latest changed data but instead the previous state. I think this is because I have the props.setChartOptions(calculateOffer(values)) inside the stateHandler.
When I integrate useEffect to solve this I end up with an infinite loop right on page load... why and how to fix this?
// PlannerWrapper
const PlannerWrapper = () => {
// Create option state for chart
const [chartOptions, setChartOptions] = useState({
options: {
...
return (
<div className="wrapper w-6/6 h-full flex bg-dotted bg-sx-white">
<div className="left-wrapper w-3/6 h-full p-8 pr-0 flex flex-col justify-between">
<div className="chart-wrapper w-full h-48p bg-sx-white-plain rounded-2xl shadow-sx-shadow">
<PlannerChart chartOptions={chartOptions}/>
</div>
</div>
<PlannerTools setChartOptions={setChartOptions}/>
</div>
)
}
// PlannerTools
import {calculateOffer} from "./utils";
const PlannerTools = (props) => {
const handleChange = (prop) => (event) => {
if(prop === 'date') {
return setValues({ ...values, [prop]: event });
}
setValues({ ...values, [prop]: event.target.value });
console.log('test')
// Re-Run calculations
props.setChartOptions(calculateOffer(values)) // <--- This should run once after the new state is available
};
...
// PlannerTools with useEffect
const PlannerTools = (props) => {
..
const handleChange = (prop) => (event) => {
if(prop === 'date') {
return setValues({ ...values, [prop]: event });
}
setValues({ ...values, [prop]: event.target.value });
};
useEffect(() => {
props.setChartOptions(calculateOffer(values)) // <-- ends up in an infinite loop right on page load
})
..
You should pass values as a dependency of useEffect
useEffect(() => {
props.setChartOptions(calculateOffer(values));
}, [values]);
to only run this effect when values is changed.
In the code without useEffect, values is bound to the previous data and not the latest data because setState in React is asynchronous.
That means setValues({ ...values, [prop]: event.target.value }); is not immediately update your values.
Read more (This link refers to setState in class component, but it should be the same for useState hook)