From 15b8b738f380b276d7cee9f97a5ffa3f7fd8cc06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Mon, 13 Sep 2021 10:04:52 +0200
Subject: [PATCH] Graphite: Fix Graphite Editor not loading (#39116)

---
 .../datasource/graphite/state/context.tsx     | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/state/context.tsx b/public/app/plugins/datasource/graphite/state/context.tsx
index e5a4883b31a..46225d9fa0c 100644
--- a/public/app/plugins/datasource/graphite/state/context.tsx
+++ b/public/app/plugins/datasource/graphite/state/context.tsx
@@ -46,17 +46,27 @@ export const GraphiteQueryEditorContext = ({
     }
   }, [dispatch, range, previousRange]);
 
-  useEffect(() => {
-    if (state) {
-      dispatch(actions.queriesChanged(queries));
-    }
-  }, [dispatch, queries, state]);
+  useEffect(
+    () => {
+      if (state) {
+        dispatch(actions.queriesChanged(queries));
+      }
+    },
+    // adding state to dependencies causes infinite loops
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch, queries]
+  );
 
-  useEffect(() => {
-    if (state && state.target?.target !== query.target) {
-      dispatch(actions.queryChanged(query));
-    }
-  }, [dispatch, query, state]);
+  useEffect(
+    () => {
+      if (state && state.target?.target !== query.target) {
+        dispatch(actions.queryChanged(query));
+      }
+    },
+    // adding state to dependencies causes infinite loops
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch, query]
+  );
 
   if (!state) {
     dispatch(