From 393c97da851f0028abeb9aa8d34c4d2628a410db Mon Sep 17 00:00:00 2001
From: Karan Shah <karan.shah@simplybusiness.co.uk>
Date: Tue, 1 Mar 2022 10:08:57 +0000
Subject: [PATCH] Wrap state changes with useEffect to stop infinite
 re-rendering

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
---
 .../EntityAirbrakeWidget.tsx                  | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
index 93bf490fa8..f85ebbf8a9 100644
--- a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
+++ b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
@@ -53,9 +53,11 @@ export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
     ComponentState.Loading,
   );
 
-  if (!projectId) {
-    setComponentState(ComponentState.NoProjectId);
-  }
+  useEffect(() => {
+    if (!projectId) {
+      setComponentState(ComponentState.NoProjectId);
+    }
+  }, [projectId]);
 
   const { loading, value, error } = useAsync(async () => {
     const result = await airbrakeApi.fetchGroups(projectId);
@@ -63,16 +65,15 @@ export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
     return result;
   }, [airbrakeApi, projectId]);
 
-  if (loading) {
-    setComponentState(ComponentState.Loading);
-  }
-
-  if (componentState !== ComponentState.NoProjectId && error) {
-    setComponentState(ComponentState.Error);
-  }
+  useEffect(() => {
+    if (loading) {
+      setComponentState(ComponentState.Loading);
+    }
+  }, [loading]);
 
   useEffect(() => {
-    if (componentState === ComponentState.Error && error) {
+    if (componentState !== ComponentState.NoProjectId && error) {
+      setComponentState(ComponentState.Error);
       errorApi.post(error);
     }
   }, [componentState, error, errorApi]);