From 540bd1cd7a4289c22c2c1edb45e7cbfeb40745a1 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 5 Nov 2025 05:00:23 +0000
Subject: [PATCH] Fix unstable callbacks in moderation queue

---
 src/components/moderation/ModerationQueue.tsx |  6 ++++--
 .../moderation/useModerationQueueManager.ts   | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 23edcdb5..458e9714 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -135,8 +135,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
   }, [queueManager, toast]);
   
   // Fetch active locks count for superusers
+  const isSuperuserValue = isSuperuser();
+  
   useEffect(() => {
-    if (!isSuperuser()) return;
+    if (!isSuperuserValue) return;
     
     const fetchActiveLocksCount = async () => {
       const { count } = await supabase
@@ -153,7 +155,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
     // Refresh count periodically
     const interval = setInterval(fetchActiveLocksCount, 30000); // Every 30s
     return () => clearInterval(interval);
-  }, [isSuperuser]);
+  }, [isSuperuserValue]);
   
   // Track if lock was restored from database
   useEffect(() => {
diff --git a/src/hooks/moderation/useModerationQueueManager.ts b/src/hooks/moderation/useModerationQueueManager.ts
index d984d1ba..4f80b6ca 100644
--- a/src/hooks/moderation/useModerationQueueManager.ts
+++ b/src/hooks/moderation/useModerationQueueManager.ts
@@ -136,13 +136,13 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     },
   });
 
+  // Use a stable callback via ref to prevent excessive re-renders
+  const lockStateChangeHandlerRef = useRef<() => void>();
+  
   const queue = useModerationQueue({
-    onLockStateChange: () => {
-      logger.log('🔄 Lock state changed, invalidating queue cache');
-      queueQuery.invalidate();
-      // Force immediate re-render by triggering a loading cycle
-      setLoadingState(prev => prev === "loading" ? "ready" : prev);
-    }
+    onLockStateChange: useCallback(() => {
+      lockStateChangeHandlerRef.current?.();
+    }, [])
   });
   const entityCache = useEntityCache();
   const profileCache = useProfileCache();
@@ -177,6 +177,13 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     enabled: !!user,
   });
 
+  // Update the lock state change handler ref whenever queueQuery changes
+  lockStateChangeHandlerRef.current = () => {
+    logger.log('🔄 Lock state changed, invalidating queue cache');
+    queueQuery.invalidate();
+    setLoadingState(prev => prev === "loading" ? "ready" : prev);
+  };
+
   // Update items when query data changes
   useEffect(() => {
     if (queueQuery.items) {