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
    })
..