Tengo un componente principal PlannerWrapper que tiene los componentes secundarios PlannerChart que devuelve una instancia de ApexChart y la representa en el DOM y otro componente secundario PlannerTools que toma algunas entradas de formulario y actualiza la instancia de gráfico existente.
Quiero actualizar el gráfico siempre en el cambio de una entrada de formulario que de alguna manera funciona, pero no usa los últimos datos modificados sino el estado anterior. Creo que esto se debe a que tengo props.setChartOptions(calculateOffer(values)) dentro de stateHandler.
Cuando integro useEffect para resolver esto, termino con un bucle infinito justo al cargar la página... ¿por qué y cómo solucionar esto?
// 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 }) ..Debe pasar values como una dependencia de useEffect
useEffect(() => { props.setChartOptions(calculateOffer(values)); }, [values]); para ejecutar este efecto solo cuando se cambien values .
En el código sin useEffect , los values están vinculados a los datos anteriores y no a los datos más recientes porque setState en React es asíncrono. Eso significa setValues({ ...values, [prop]: event.target.value }); no es actualizar inmediatamente sus values .
Leer más (Este enlace se refiere a setState en el componente de clase, pero debería ser lo mismo para useState hook)