diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx index b0920f3347..58dddecc76 100644 --- a/frontend/src/Editor/Components/Chart.jsx +++ b/frontend/src/Editor/Components/Chart.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; // Use plotly basic bundle @@ -8,7 +8,6 @@ const Plot = createPlotlyComponent(Plotly); export const Chart = function Chart({ id, width, height, component, onComponentClick, currentState, darkMode }) { const [loadingState, setLoadingState] = useState(false); - const [chartData, setChartData] = useState([]); const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; @@ -87,8 +86,8 @@ export const Chart = function Chart({ id, width, height, component, onComponentC const data = resolveReferences(dataString, currentState, []); - useEffect(() => { - let rawData = data || []; + const computeChartData = (data, dataString) => { + let rawData = data; if (typeof rawData === 'string') { try { rawData = JSON.parse(dataString); @@ -122,9 +121,11 @@ export const Chart = function Chart({ id, width, height, component, onComponentC ]; } - setChartData(newData); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [data, chartType]); + return newData; + }; + + // eslint-disable-next-line react-hooks/exhaustive-deps + const memoizedChartData = useMemo(() => computeChartData(data, dataString), [data, dataString]); return (
) : (