From 4217c8057b4877a5a73c297f216bc242a209de76 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Fri, 30 Jun 2023 14:00:26 -0500
Subject: [PATCH] Graphite: Fix infinite loop in text editor when using
 graphite in a Mixed datasource (#70970)

Fix infinite react state loop exhibited in mixed datasource by stringifying objects in useEffect dependencies
---
 public/app/plugins/datasource/graphite/state/context.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/state/context.tsx b/public/app/plugins/datasource/graphite/state/context.tsx
index 2565431e5bc..cac739a1251 100644
--- a/public/app/plugins/datasource/graphite/state/context.tsx
+++ b/public/app/plugins/datasource/graphite/state/context.tsx
@@ -45,7 +45,7 @@ export const GraphiteQueryEditorContext = ({
   // synchronise changes provided in props with editor's state
   const previousRange = usePrevious(range);
   useEffect(() => {
-    if (previousRange?.raw !== range?.raw) {
+    if (JSON.stringify(previousRange?.raw) !== JSON.stringify(range?.raw)) {
       dispatch(actions.timeRangeChanged(range));
     }
   }, [dispatch, range, previousRange]);
@@ -58,7 +58,7 @@ export const GraphiteQueryEditorContext = ({
     },
     // adding state to dependencies causes infinite loops
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatch, queries]
+    [JSON.stringify(queries)]
   );
 
   useEffect(
@@ -82,7 +82,7 @@ export const GraphiteQueryEditorContext = ({
     },
     // adding state to dependencies causes infinite loops
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [needsRefresh, onChange, onRunQuery, query]
+    [needsRefresh, JSON.stringify(query)]
   );
 
   if (!state) {