🛠️ [fix] Defer state updates in effects using named UI delay

- Replaces direct 0ms timeouts in effect hooks with a shared constant for deferred state updates, clarifying intent and improving maintainability
- Updates documentation to explain use of deferred updates and modern React state patterns
- Helps comply with React best practices by avoiding direct state changes in effects, reducing risk of unexpected behavior

Author: Nick2bad4u

src/App.tsx

@@ -47,6 +47,7 @@ import { setupCacheSync } from "./utils/cacheSync";
  * @remarks
  * This is the primary entry point component that orchestrates the entire application
  * including state management, theming, error handling, and real-time updates.
+ * Uses deferred state updates via timeouts to comply with React best practices.
  *
  * @public
  *
@@ -105,7 +106,7 @@ function App() {
     useEffect((): (() => void) | undefined => {
         if (!isLoading) {
             // Use timeout to defer state update to avoid direct call in useEffect
-            const clearTimeoutId = setTimeout(clearLoadingOverlay, 0);
+            const clearTimeoutId = setTimeout(clearLoadingOverlay, UI_DELAYS.STATE_UPDATE_DEFER);
             return (): void => {
                 clearTimeout(clearTimeoutId);
             };

src/components/AddSiteForm/AddSiteForm.tsx

@@ -128,7 +128,7 @@ export const AddSiteForm = React.memo(function AddSiteForm() {
     useEffect(() => {
         if (!isLoading) {
             // Use timeout to defer state update to avoid direct call in useEffect
-            const clearTimeoutId = setTimeout(clearButtonLoading, 0);
+            const clearTimeoutId = setTimeout(clearButtonLoading, UI_DELAYS.STATE_UPDATE_DEFER);
             return () => clearTimeout(clearTimeoutId);
         }
 

src/components/Settings/Settings.tsx

@@ -86,7 +86,7 @@ export function Settings({ onClose }: Readonly<SettingsProperties>) {
     useEffect(() => {
         if (!isLoading) {
             // Use timeout to defer state update to avoid direct call in useEffect
-            const clearTimeoutId = setTimeout(clearButtonLoading, 0);
+            const clearTimeoutId = setTimeout(clearButtonLoading, UI_DELAYS.STATE_UPDATE_DEFER);
             return () => clearTimeout(clearTimeoutId);
         }
 

src/components/SiteDetails/ScreenshotThumbnail.tsx

@@ -9,6 +9,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { UI_DELAYS } from "../../constants";
 import logger from "../../services/logger";
 import { useTheme } from "../../theme/useTheme";
 
@@ -60,7 +61,7 @@ export function ScreenshotThumbnail({ siteName, url }: ScreenshotThumbnailProper
                 hoverTimeoutReference.current = undefined;
             }
             // Use timeout to defer state update to avoid direct call in useEffect
-            const clearTimeoutId = setTimeout(clearOverlayVariables, 0);
+            const clearTimeoutId = setTimeout(clearOverlayVariables, UI_DELAYS.STATE_UPDATE_DEFER);
             return () => clearTimeout(clearTimeoutId);
         }
         return () => {};
@@ -120,7 +121,7 @@ export function ScreenshotThumbnail({ siteName, url }: ScreenshotThumbnailProper
     useEffect(() => {
         if (hovered && linkReference.current) {
             // Use timeout to defer state update to avoid direct call in useEffect
-            const updateTimeoutId = setTimeout(updateOverlayPosition, 0);
+            const updateTimeoutId = setTimeout(updateOverlayPosition, UI_DELAYS.STATE_UPDATE_DEFER);
             return () => clearTimeout(updateTimeoutId);
         }
         return () => {};

src/components/SiteDetails/useAddSiteForm.ts

@@ -1,7 +1,13 @@
 /**
  * Custom hook for managing add site form state and validation.
+ *
  * Provides comprehensive form state management for creating new sites and adding monitors to existing sites.
  * Supports real-time validation, automatic UUID generation, and error handling.
+ *
+ * @remarks
+ * This hook uses render-time state management with previous value tracking to handle
+ * state resets when the selected monitor changes, following modern React patterns
+ * that avoid direct setState calls in useEffect hooks.
  */
 
 import { useCallback, useState } from "react";

src/constants.ts

@@ -240,6 +240,13 @@ export const UI_DELAYS = {
     LOADING_BUTTON: 100, // Delay before showing loading spinners (ms)
     /** Delay before showing loading overlay in milliseconds */
     LOADING_OVERLAY: 100, // Delay before showing loading overlay (ms)
+    /**
+     * Minimal delay to defer state updates in useEffect cleanup.
+     * @remarks
+     * Used to comply with React best practices by avoiding direct setState calls
+     * in useEffect. The 0ms delay defers execution to the next tick of the event loop.
+     */
+    STATE_UPDATE_DEFER: 0, // Defers state updates to next event loop tick (ms)
 } as const;
 
 /**

src/hooks/site/useSiteDetails.ts

@@ -5,8 +5,13 @@
  * - Site data and monitor information
  * - UI state (active tab, loading states)
  * - Site operations (start/stop monitoring, check now, update settings)
- * - Local state management for editable fields
+ * - Derived state management for editable fields (computed during render)
  * - Integration with analytics data
+ *
+ * @remarks
+ * This hook uses modern React patterns with derived state computed during render
+ * instead of managing state in useEffect hooks. Changes are tracked using previous
+ * value comparison and user edit state to provide responsive UI feedback.
  */
 
 import { useCallback, useEffect, useState } from "react";

src/theme/useTheme.ts

@@ -8,6 +8,7 @@
 import { isSiteStatus, type MonitorStatus, type SiteStatus } from "@shared/types";
 import { useCallback, useEffect, useState } from "react";
 
+import { UI_DELAYS } from "../constants";
 import { useSettingsStore } from "../stores/settings/useSettingsStore";
 import { themeManager } from "./ThemeManager";
 import { Theme, ThemeName } from "./types";
@@ -154,24 +155,25 @@ export function useTheme() {
     // Update theme when settings or systemTheme change
     useEffect(() => {
         // Use timeout to defer state update to avoid direct call in useEffect
-        const updateTimeoutId = setTimeout(updateCurrentTheme, 0);
+        const updateTimeoutId = setTimeout(updateCurrentTheme, UI_DELAYS.STATE_UPDATE_DEFER);
         return () => clearTimeout(updateTimeoutId);
     }, [settings.theme, systemTheme, updateCurrentTheme]);
 
     // Listen for system theme changes
     useEffect(() => {
         const timeoutIds: NodeJS.Timeout[] = [];
-        
+
         const cleanup = themeManager.onSystemThemeChange((isDark) => {
             const newSystemTheme = isDark ? "dark" : "light";
             // Use timeout to defer state update to avoid direct call in useEffect
-            const timeoutId = setTimeout(() => updateSystemTheme(newSystemTheme), 0);
+            const timeoutId = setTimeout(() => updateSystemTheme(newSystemTheme), UI_DELAYS.STATE_UPDATE_DEFER);
             timeoutIds.push(timeoutId);
         });
 
         // Set initial system theme using timeout
         const initialTheme = themeManager.getSystemThemePreference();
-        const initialTimeoutId = setTimeout(() => updateSystemTheme(initialTheme), 0);
+        // eslint-disable-next-line @eslint-react/web-api/no-leaked-timeout -- Timeout is properly cleaned up in the forEach loop below
+        const initialTimeoutId = setTimeout(() => updateSystemTheme(initialTheme), UI_DELAYS.STATE_UPDATE_DEFER);
         timeoutIds.push(initialTimeoutId);
 
         return () => {