Fix: Resolve React rendering errors

The AI will address two runtime errors: a minified React error (likely related to incorrect component usage or props) and a "too many re-renders" error (indicating an infinite loop). The AI will analyze the code, particularly the `WhatsApp` component and its related hooks and components, to identify and fix the root causes of these errors.

src/hooks/useWhatsAppInstances.ts

@@ -14,6 +14,7 @@ export const useWhatsAppInstances = () => {
   const [instances, setInstances] = useState<WhatsAppInstance[]>([]);
   const [currentUserId, setCurrentUserId] = useState<string>('');
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isCheckingStatus, setIsCheckingStatus] = useState(false);
 
   // Get current user ID and load instances on component mount
   useEffect(() => {
@@ -38,9 +39,10 @@ export const useWhatsAppInstances = () => {
   
   // Function to check connection status for all instances
   const checkAllInstancesStatus = useCallback(async () => {
-    if (instances.length === 0) return;
+    if (instances.length === 0 || isCheckingStatus) return;
     
     console.log(`Checking connection status for ${instances.length} instances`);
+    setIsCheckingStatus(true);
     
     try {
       const updatedInstances = await Promise.all(
@@ -96,8 +98,10 @@ export const useWhatsAppInstances = () => {
       }
     } catch (error) {
       console.error("Error checking instances status:", error);
+    } finally {
+      setIsCheckingStatus(false);
     }
-  }, [instances]);
+  }, [instances, isCheckingStatus]);
 
   // Handler para atualizar a lista de instâncias do servidor
   const refreshInstances = async () => {
@@ -185,8 +189,6 @@ export const useWhatsAppInstances = () => {
       });
     } finally {
       setIsRefreshing(false);
-      // Verificar status após atualizar a lista
-      await checkAllInstancesStatus();
     }
   };
 

src/pages/WhatsApp.tsx

@@ -37,9 +37,13 @@ const WhatsApp = () => {
   useEffect(() => {
     console.log("Setting up periodic status checks, current instances:", instances.length);
     
-    // Check status initially
+    // Check status initially after a short delay to prevent immediate execution
+    let initialCheck: NodeJS.Timeout;
     if (instances.length > 0) {
+      initialCheck = setTimeout(() => {
+        console.log("Running initial status check");
         checkAllInstancesStatus();
+      }, 1000);
     }
 
     // Set up interval for periodic checks (every 30 seconds)
@@ -50,16 +54,18 @@ const WhatsApp = () => {
       }
     }, 30000); // 30 seconds
 
-    // Clean up interval when component unmounts
+    // Clean up interval and timeout when component unmounts
     return () => {
-      if (interval) {
       clearInterval(interval);
+      if (initialCheck) {
+        clearTimeout(initialCheck);
       }
     };
   }, [instances.length, checkAllInstancesStatus]);
 
   // Run refresh instances on initial load to get server instances
   useEffect(() => {
+    // Only run on first render
     const initialLoad = async () => {
       if (instances.length === 0) {
         try {
@@ -71,6 +77,8 @@ const WhatsApp = () => {
     };
     
     initialLoad();
+    // This effect should only run once when the component mounts
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Handler for when a new instance is created
@@ -83,7 +91,8 @@ const WhatsApp = () => {
       handleViewQrCode(newInstance);
     }
 
-    // Trigger a status check for all instances
+    // Trigger a status check for all instances with a delay
+    setTimeout(async () => {
       try {
         await checkAllInstancesStatus();
       } catch (error) {
@@ -94,6 +103,7 @@ const WhatsApp = () => {
           variant: "default",
         });
       }
+    }, 2000);
   };
 
   // Handler for when an instance is deleted