refactor: replace setTimeout with queueMicrotask for improved state updates in various components

Author: rodrigooler

apps/torus-bridge/src/app/_components/transfer-details/index.tsx

@@ -2,7 +2,7 @@
 
 import { useStore } from "~/utils/store";
 import type { TransferContext } from "~/utils/types";
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { TransfersDetailsDialog } from "./_components/transfer-details-dialog";
 
 export function TransferDetails() {
@@ -14,19 +14,17 @@ export function TransferDetails() {
   const transfers = useStore((s) => s.transfers);
   const transferLoading = useStore((s) => s.transferLoading);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const shouldShowModal = !transferLoading && transfers.length > 0;
     const latestTransfer = shouldShowModal
       ? transfers[transfers.length - 1]
       : null;
 
     if (latestTransfer && latestTransfer !== selectedTransfer) {
-      const timeoutId = setTimeout(() => {
+      queueMicrotask(() => {
         setSelectedTransfer(latestTransfer);
         setIsModalOpen(true);
-      }, 0);
-
-      return () => clearTimeout(timeoutId);
+      });
     }
   }, [transfers, transferLoading, selectedTransfer]);
 

apps/torus-bridge/src/context/evm-wallet-provider.tsx

@@ -110,8 +110,7 @@ export function EvmWalletProvider({
 
   // Effect to run after client-side mounting
   useEffect(() => {
-    const timer = setTimeout(() => setHasMounted(true), 0);
-    return () => clearTimeout(timer);
+    queueMicrotask(() => setHasMounted(true));
   }, []);
 
   const { wagmiConfig } = useMemo(() => {

apps/torus-bridge/src/context/solana-wallet-provider.tsx

@@ -22,8 +22,7 @@ export function SolanaWalletProvider({
 
   // Effect to run after client-side mounting
   useEffect(() => {
-    const timer = setTimeout(() => setHasMounted(true), 0);
-    return () => clearTimeout(timer);
+    queueMicrotask(() => setHasMounted(true));
   }, []);
 
   // TODO support multiple networks

apps/torus-governance/hooks/use-sign-in.tsx

@@ -26,8 +26,8 @@ export const useSignIn = () => {
 
     const auth = localStorage.getItem("authorization");
     if (!auth) {
-      const timer = setTimeout(() => setIsUserAuthenticated(false), 0);
-      return () => clearTimeout(timer);
+      queueMicrotask(() => setIsUserAuthenticated(false));
+      return;
     }
 
     // Async function for session checking with proper error handling
@@ -66,7 +66,7 @@ export const useSignIn = () => {
     if (!selectedAccount || favoriteWalletAddress === selectedAccount.address)
       return;
 
-    setTimeout(() => setIsUserAuthenticated(null), 0);
+    queueMicrotask(() => setIsUserAuthenticated(null));
 
     // Handle localStorage with proper error handling
     const clearStorage = async () => {

apps/torus-portal/src/hooks/use-blob-url.tsx

@@ -9,9 +9,8 @@ export const useBlobUrl = (blob: Blob | Nullish) => {
   useEffect(() => {
     if (!blob) return;
     const objectUrl = URL.createObjectURL(blob);
-    const timer = setTimeout(() => setUrl(objectUrl), 0);
+    queueMicrotask(() => setUrl(objectUrl));
     return () => {
-      clearTimeout(timer);
       URL.revokeObjectURL(objectUrl);
     };
   }, [blob]);

apps/torus-wallet/src/app/_components/transactions-sheet.tsx

@@ -23,8 +23,8 @@ export function TransactionsSheet() {
       const timer = setTimeout(() => setShouldRenderContent(true), 150);
       return () => clearTimeout(timer);
     } else {
-      const timer = setTimeout(() => setShouldRenderContent(false), 0);
-      return () => clearTimeout(timer);
+      const frameId = requestAnimationFrame(() => setShouldRenderContent(false));
+      return () => cancelAnimationFrame(frameId);
     }
   }, [isOpen]);