Fix: Resolve React error #301

The error is a minified React error, likely caused by a problem with the component's rendering. The error occurs on the /whatsapp route.

src/components/auth/ProtectedRoute.tsx

@@ -11,6 +11,7 @@ interface ProtectedRouteProps {
 const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [shouldShowToast, setShouldShowToast] = useState(false);
   const { toast } = useToast();
   const location = useLocation();
 
@@ -30,10 +31,12 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
         } else {
           console.log('Nenhuma sessão encontrada, redirecionando para login');
           setIsAuthenticated(false);
+          setShouldShowToast(true); // Mark that we should show toast, but don't do it here
         }
       } catch (error) {
         console.error('Erro ao verificar autenticação:', error);
         setIsAuthenticated(false);
+        setShouldShowToast(true);
       } finally {
         setIsLoading(false);
       }
@@ -42,6 +45,17 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
     checkAuthentication();
   }, []); // Execute only on mount
 
+  // Show toast in a separate useEffect to avoid re-render loops
+  useEffect(() => {
+    if (shouldShowToast) {
+      toast({
+        title: "Autenticação necessária",
+        description: "Por favor, faça login para acessar esta página"
+      });
+      setShouldShowToast(false); // Reset the flag after showing toast
+    }
+  }, [shouldShowToast, toast]);
+
   // Se estiver carregando, mostrar estado de carregamento
   if (isLoading) {
     return (
@@ -53,11 +67,6 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   
   // Se não estiver autenticado, redirecionar para a página de login
   if (!isAuthenticated) {
-    // Use toast here - it's safer after render and won't cause infinite re-renders
-    toast({
-      title: "Autenticação necessária",
-      description: "Por favor, faça login para acessar esta página"
-    });
     return <Navigate to="/auth" state={{ from: location }} replace />;
   }
   

src/hooks/whatsApp/useWhatsAppInstance.ts

@@ -22,6 +22,8 @@ export const useWhatsAppInstance = (
   
   const [isLoading, setIsLoading] = useState(false);
   const [instanceFound, setInstanceFound] = useState(false);
+  const [shouldShowToast, setShouldShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState({ title: '', description: '', variant: '' as any });
 
   // Function to fetch specific instance by name
   const fetchInstanceByName = async () => {
@@ -58,10 +60,14 @@ export const useWhatsAppInstance = (
         console.log('Found instance:', foundInstance);
         addInstance(foundInstance);
         setInstanceFound(true);
-        toast({
+        
+        // Set toast data instead of calling toast directly
+        setToastMessage({
           title: "Instância encontrada",
-          description: `A instância ${instanceName} foi localizada no servidor.`
+          description: `A instância ${instanceName} foi localizada no servidor.`,
+          variant: "default"
         });
+        setShouldShowToast(true);
       } else {
         setInstanceFound(false);
         console.log(`Instance ${instanceName} not found`);
@@ -69,16 +75,31 @@ export const useWhatsAppInstance = (
     } catch (error) {
       console.error('Error fetching specific instance:', error);
       setInstanceFound(false);
-      toast({
+      
+      // Set toast data instead of calling toast directly
+      setToastMessage({
         title: "Instância não encontrada",
         description: "Não foi possível encontrar a instância com este nome.",
         variant: "destructive"
       });
+      setShouldShowToast(true);
     } finally {
       setIsLoading(false);
     }
   };
 
+  // Show toast in a separate useEffect to avoid re-render loops
+  useEffect(() => {
+    if (shouldShowToast) {
+      toast({
+        title: toastMessage.title,
+        description: toastMessage.description,
+        variant: toastMessage.variant
+      });
+      setShouldShowToast(false);
+    }
+  }, [shouldShowToast, toastMessage, toast]);
+
   // Save instance name to localStorage
   const saveInstanceName = (name: string) => {
     if (currentUserId) {