Updating state of sibling component ends up in infinite loop using useEffect-CodePudding

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

CodePudding user response：

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)