From 6b79a3096d3506a843d1f4f26e0b35210d2b5210 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Wed, 27 Oct 2021 13:27:57 +0530
Subject: [PATCH] Bugfix/chart widget freeze issue (#976)

* fixes chart widget

* refactored

* removing comments
---
 frontend/src/Editor/Components/Chart.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

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 (
     <div
@@ -143,7 +144,7 @@ export const Chart = function Chart({ id, width, height, component, onComponentC
         </div>
       ) : (
         <Plot
-          data={chartData}
+          data={memoizedChartData}
           layout={layout}
           config={{
             displayModeBar: false,