[fix] Prevent infinite useEffects loop in range-plot (#2892)

Signed-off-by: Ihor Dykhta <[email protected]>
keplergl · Jan 3, 2025 · 4c9ffe8 · 4c9ffe8
1 parent 0b67c54
commit 4c9ffe8
Showing 1 changed file with 32 additions and 29 deletions.
diff --git a/src/components/src/common/range-plot.tsx b/src/components/src/common/range-plot.tsx
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useCallback, useMemo, useState, useEffect, CSSProperties} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState, CSSProperties} from 'react';
 import styled, {withTheme} from 'styled-components';
 import RangeBrushFactory, {OnBrush, RangeBrushProps} from './range-brush';
 import HistogramPlotFactory from './histogram-plot';
@@ -181,36 +181,39 @@ export default function RangePlotFactory(
     ...otherProps
   }: WithPlotLoadingProps) => {
     const [isLoading, setIsLoading] = useState(false);
-    // eslint-disable-next-line complexity
+    const isChangingRef = useRef(false);
+
+    useEffect(() => {
+      if (isChangingRef.current) {
+        if (hasHistogram(plotType, bins)) {
+          // Bins are loaded
+          isChangingRef.current = false;
+        }
+      } else {
+        if (!plotType || (isHistogramPlot(plotType) && !bins)) {
+          // load histogram
+          setIsLoading(true);
+          setFilterPlot({plotType: {type: PLOT_TYPES.histogram}});
+          isChangingRef.current = true;
+        }
+      }
+    }, [bins, plotType, setFilterPlot]);
+
     useEffect(() => {
-      if (!plotType && !isLoading) {
-        // if plotType is undefined. this shouldn't happen
-        setIsLoading(true);
-        setFilterPlot({
-          plotType: {
-            type: PLOT_TYPES.histogram
-          }
-        });
-      } else if (isHistogramPlot(plotType) && !bins && !isLoading) {
-        setIsLoading(true);
-        // load histogram
-        setFilterPlot({
-          plotType: {
-            type: PLOT_TYPES.histogram
-          }
-        });
-      } else if (isLineChart(plotType) && !lineChart && !isLoading) {
-        // load line chart
-        setIsLoading(true);
-        setFilterPlot({
-          plotType: {
-            type: PLOT_TYPES.lineChart
-          }
-        });
-      } else if (isLoading && (hasHistogram(plotType, bins) || hasLineChart(plotType, lineChart))) {
-        setIsLoading(false);
+      if (isChangingRef.current) {
+        if (hasLineChart(plotType, lineChart)) {
+          // Line chart is loaded
+          isChangingRef.current = false;
+        }
+      } else {
+        if (isLineChart(plotType) && !lineChart) {
+          // load line chart
+          setIsLoading(true);
+          setFilterPlot({plotType: {type: PLOT_TYPES.lineChart}});
+          isChangingRef.current = true;
+        }
       }
-    }, [plotType, bins, lineChart, setFilterPlot, isLoading, setIsLoading]);
+    }, [lineChart, plotType, setFilterPlot]);
 
     const rangePlotStyle = useMemo(
       () => ({