Fix unstable callbacks in moderation queue

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(() => {

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) {