keep track of isStaff in state (#55227)

Author: Ebonsignori

src/events/components/experiments/useShouldShowExperiment.ts

@@ -13,6 +13,20 @@ export function useShouldShowExperiment(experimentKey: ExperimentNames | { key:
   const [showExperiment, setShowExperiment] = useState(false)
   const router = useRouter()
   const mainContext = useMainContext()
+  const [isStaff, setIsStaff] = useState<boolean>(false)
+
+  // Fetch `isStaff` one time on mount so we can know if the other useEffect needs to be re-run
+  useEffect(() => {
+    let cancelled = false
+    async function checkStaff() {
+      const staffValue = await getIsStaff()
+      if (!cancelled) setIsStaff(staffValue)
+    }
+    checkStaff()
+    return () => {
+      cancelled = true
+    }
+  }, [])
 
   useEffect(() => {
     const updateShouldShow = async () => {
@@ -36,7 +50,7 @@ export function useShouldShowExperiment(experimentKey: ExperimentNames | { key:
     return () => {
       window.removeEventListener('controlGroupOverrideChanged', updateShouldShow)
     }
-  }, [experimentKey, router.locale, mainContext.currentVersion, router.query])
+  }, [experimentKey, router.locale, mainContext.currentVersion, router.query, isStaff])
 
   return showExperiment
 }