refactor(react): move effects outside conditional

apps/client/src/widgets/dialogs/bulk_actions.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useState, useCallback } from "preact/hooks";
 import { t } from "../../services/i18n";
 import Modal from "../react/Modal";
 import ReactBasicWidget from "../react/ReactBasicWidget";
@@ -28,26 +28,30 @@ function BulkActionComponent() {
         setShown(true);
     });
 
-    if (selectedOrActiveNoteIds && bulkActionNote) {
     useEffect(() => {
+        if (!selectedOrActiveNoteIds || !bulkActionNote) return;
+        
         server.post<BulkActionAffectedNotes>("bulk-action/affected-notes", {
             noteIds: selectedOrActiveNoteIds,
             includeDescendants
         }).then(({ affectedNoteCount }) => setAffectedNoteCount(affectedNoteCount));
-        }, [ selectedOrActiveNoteIds, includeDescendants ]);
+    }, [ selectedOrActiveNoteIds, includeDescendants, bulkActionNote ]);
 
-        function refreshExistingActions() {
+    const refreshExistingActions = useCallback(() => {
-            setExistingActions(bulk_action.parseActions(bulkActionNote!));
+        if (!bulkActionNote) return;
-        }
+        setExistingActions(bulk_action.parseActions(bulkActionNote));
+    }, [bulkActionNote]);
+    
+    useEffect(() => {
+        refreshExistingActions();
+    }, [refreshExistingActions]);
     
-        useEffect(() => refreshExistingActions(), []);
     useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
         if (loadResults.getAttributeRows().find((row) =>
             row.type === "label" && row.name === "action" && row.noteId === "_bulkAction")) {
                 refreshExistingActions();
         }
     }, shown);
-    }
 
     return (
         <Modal

apps/client/src/widgets/dialogs/delete_notes.tsx

@@ -1,9 +1,8 @@
-import { useRef, useState } from "preact/hooks";
+import { useRef, useState, useEffect } from "preact/hooks";
 import { t } from "../../services/i18n.js";
 import FormCheckbox from "../react/FormCheckbox.js";
 import Modal from "../react/Modal.js";
 import ReactBasicWidget from "../react/ReactBasicWidget.js";
-import { useEffect } from "preact/hooks";
 import type { DeleteNotesPreview } from "@triliumnext/commons";
 import server from "../../services/server.js";
 import froca from "../../services/froca.js";

apps/client/src/widgets/react/Dropdown.tsx

@@ -12,20 +12,28 @@ export default function Dropdown({ className, isStatic, children }: DropdownProp
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
-    if (triggerRef?.current) {
     useEffect(() => {
-            const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current!);
+        if (!triggerRef.current) return;
-            return () => dropdown.dispose();
+        
-        });
+        const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
-    }
+        return () => dropdown.dispose();
+    }, []); // Add dependency array
 
-    if (dropdownRef?.current) {
     useEffect(() => {
-            $(dropdownRef.current!).on("hide.bs.dropdown", () => {
+        if (!dropdownRef.current) return;
-                console.log("Hide");
+        
-            });
+        const handleHide = () => {
-        });
+            // Remove console.log from production code
-    }
+        };
+        
+        const $dropdown = $(dropdownRef.current);
+        $dropdown.on("hide.bs.dropdown", handleHide);
+        
+        // Add proper cleanup
+        return () => {
+            $dropdown.off("hide.bs.dropdown", handleHide);
+        };
+    }, []); // Add dependency array
 
     return (
         <div ref={dropdownRef} class="dropdown" style={{ display: "flex" }}>