refactor: replace all rum/use-effect!, add kondo :discouraged-var config

.clj-kondo/config.edn

@@ -34,7 +34,11 @@
   :discouraged-namespace
   {logseq.db.sqlite.cli {:message "frontend should not depend on CLI namespace with sqlite3 dependency"}
    logseq.outliner.cli {:message "frontend should not depend on CLI namespace with sqlite3 dependency"}}
-
+  :discouraged-var
+  {rum.core/use-effect! {:message "Use frontend.hooks/use-effect! instead" :level :info}
+   rum.core/use-memo {:message "Use frontend.hooks/use-memo instead" :level :info}
+   rum.core/use-layout-effect! {:message "Use frontend.hooks/use-layout-effect! instead" :level :info}
+   rum.core/use-callback {:message "Use frontend.hooks/use-callback instead" :level :info}}
   :unused-namespace {:level :warning
                      :exclude [logseq.db.frontend.entity-plus]}
 

src/main/frontend/components/all_pages.cljs

@@ -12,7 +12,8 @@
             [promesa.core :as p]
             [rum.core :as rum]
             [frontend.ui :as ui]
-            [frontend.config :as config]))
+            [frontend.config :as config]
+            [frontend.hooks :as hooks]))
 
 (defn- columns
   []
@@ -57,7 +58,7 @@
                                       {:with-object-name? false
                                        :with-id? false})
         view-entity (first (ldb/get-all-pages-views db))]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js worker @state/*db-worker]
          (p/let [result-str (.get-page-refs-count worker (state/get-current-repo))

src/main/frontend/components/assets.cljs

@@ -14,7 +14,8 @@
    [frontend.config :as config]
    [frontend.components.select :as cp-select]
    [frontend.handler.notification :as notification]
-   [frontend.handler.assets :as assets-handler]))
+   [frontend.handler.assets :as assets-handler]
+   [frontend.hooks :as hooks]))
 
 (defn -get-all-formats
   []
@@ -32,7 +33,7 @@
   (let [[*input-val, set-*input-val] (rum/use-state (atom nil))
         [input-empty?, set-input-empty?] (rum/use-state true)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(set-input-empty? (string/blank? @*input-val))
      [@*input-val])
 

src/main/frontend/components/block.cljs

@@ -277,7 +277,7 @@
         *handle-left (hooks/use-ref nil)
         *handle-right (hooks/use-ref nil)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (doseq [el [(hooks/deref *handle-left)
                    (hooks/deref *handle-right)]]
@@ -769,7 +769,7 @@
 (rum/defc popup-preview-impl
   [children {:keys [*timer *timer1 visible? set-visible! render *el-popup]}]
   (let [*el-trigger (hooks/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (true? visible?)
          (shui/popup-show!
@@ -833,7 +833,7 @@
         _  #_:clj-kondo/ignore (rum/defc preview-render []
                                  (let [[ready? set-ready!] (rum/use-state false)]
 
-                                   (rum/use-effect!
+                                   (hooks/use-effect!
                                     (fn []
                                       (let [el-popup (hooks/deref *el-popup)
                                             focus! #(js/setTimeout (fn [] (.focus el-popup)))]
@@ -866,7 +866,7 @@
                                                   :scroll-container (some-> (hooks/deref *el-popup) (.closest ".ls-preview-popup"))
                                                   :preview? true}))])))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (if (some-> (hooks/deref *el-wrap) (.closest "[data-radix-popper-content-wrapper]"))
          (set-in-popup! true)
@@ -4145,7 +4145,7 @@
                                                       {:top? top?
                                                        :bottom? bottom?})))})
         *wrap-ref (hooks/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when virtualized?
          (when (:current-page? config)

src/main/frontend/components/bug_report.cljs

@@ -6,7 +6,8 @@
             [reitit.frontend.easy :as rfe]
             [clojure.string :as string]
             [frontend.handler.notification :as notification]
-            [frontend.context.i18n :refer [t]]))
+            [frontend.context.i18n :refer [t]]
+            [frontend.hooks :as hooks]))
 
 (defn parse-clipboard-data-transfer
   "parse dataTransfer
@@ -49,7 +50,7 @@
                       (set-step! 0)
                       (set-result! {}))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (cond (= step 0) (js/addEventListener "paste" paste-handler!))
        (fn [] (cond (= step 0) (js/removeEventListener "paste" paste-handler!))))

src/main/frontend/components/cmdk/core.cljs

@@ -550,7 +550,7 @@
 
 (rum/defc mouse-active-effect!
   [*mouse-active? deps]
-  (rum/use-effect!
+  (hooks/use-effect!
    #(reset! *mouse-active? false)
    deps)
   nil)
@@ -791,11 +791,11 @@
     ;; use-effect [results-ordered input] to check whether the highlighted item is still in the results,
     ;; if not then clear that puppy out!
     ;; This was moved to a functional component
-    (rum/use-effect! (fn []
+    (hooks/use-effect! (fn []
                        (when (and highlighted-item (= -1 (.indexOf all-items (dissoc highlighted-item :mouse-enter-triggered-highlight))))
                          (reset! (::highlighted-item state) nil)))
                      [all-items])
-    (rum/use-effect! (fn [] (load-results :default state)) [])
+    (hooks/use-effect! (fn [] (load-results :default state)) [])
     [:div {:class "bg-gray-02 border-b border-1 border-gray-07"}
      [:input.cp__cmdk-search-input
       {:class "text-xl bg-transparent border-none w-full outline-none px-3 py-3"

src/main/frontend/components/cmdk/list_item.cljs

@@ -56,7 +56,7 @@
   (let [ref (hooks/create-ref)
         highlight-query (partial highlight-query* app-config query)
         [hover? set-hover?] (rum/use-state false)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (and highlighted on-highlight)
          (on-highlight ref)))

src/main/frontend/components/container.cljs

@@ -199,7 +199,7 @@
   [{:keys [_id navs checked-navs set-checked-navs!]}]
   (let [[local-navs set-local-navs!] (rum/use-state checked-navs)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (set-checked-navs! local-navs))
      [local-navs])
@@ -226,7 +226,7 @@
         [checked-navs set-checked-navs!] (rum/use-state (or (storage/get :ls-sidebar-navigations)
                                                             [:whiteboards :flashcards :graph-view :all-pages]))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (vector? checked-navs)
          (storage/set :ls-sidebar-navigations checked-navs)))
@@ -415,7 +415,7 @@
                           (some->> (:width el-rect)
                                    (/ touching-x-offset)))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(js/setTimeout
        (fn [] (some-> (rum/deref ref-el)
                       (.getBoundingClientRect)
@@ -433,7 +433,7 @@
        #())
      [local-closing? left-sidebar-open?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-not (neg? close-signal)
          (close-fn)))
@@ -505,7 +505,7 @@
          (.setProperty (.-style el-doc) "--ls-left-sidebar-width" width))))
 
     ;; draggable handler
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [el (and (fn? js/window.interact) (rum/deref *el-ref))]
          (let [^js sidebar-el (.querySelector el-doc "#left-sidebar")]
@@ -759,7 +759,7 @@
 (rum/defc render-custom-context-menu
   [links position]
   (let [ref (rum/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      #(let [el (rum/deref ref)
             {:keys [x y]} (util/calc-delta-rect-offset el js/document.documentElement)]
         (set! (.. el -style -transform)
@@ -814,12 +814,12 @@
 (rum/defc help-menu-popup
   []
 
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (state/set-state! :ui/handbooks-open? false))
    [])
 
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (let [h #(state/set-state! :ui/help-open? false)]
        (.addEventListener js/document.body "click" h)

src/main/frontend/components/dnd.cljs

@@ -5,7 +5,8 @@
             ["@dnd-kit/utilities" :refer [CSS]]
             ["@dnd-kit/core" :refer [DndContext closestCenter MouseSensor useSensor useSensors]]
             [frontend.rum :as r]
-            [frontend.state :as state]))
+            [frontend.state :as state]
+            [frontend.hooks :as hooks]))
 
 (def dnd-context (r/adapt-class DndContext))
 (def sortable-context (r/adapt-class SortableContext))
@@ -40,7 +41,7 @@
         items' (bean/->js ids)
         id->item (zipmap ids col)
         [items-state set-items] (rum/use-state items')
-        _ (rum/use-effect! (fn [] (set-items items')) [col])
+        _ (hooks/use-effect! (fn [] (set-items items')) [col])
         [_active-id set-active-id] (rum/use-state nil)
         sensors (useSensors (useSensor MouseSensor (bean/->js {:activationConstraint {:distance 8}})))
         dnd-opts {:sensors sensors

src/main/frontend/components/editor.cljs

@@ -147,7 +147,7 @@
                                       (editor-handler/get-matched-classes q)
                                       (editor-handler/<get-matched-blocks q {:nlp-pages? true}))]
                        (set-matched-pages! result))))]
-    (rum/use-effect! search-f [(hooks/use-debounced-value q 50)])
+    (hooks/use-effect! search-f [(hooks/use-debounced-value q 50)])
 
     (let [matched-pages' (if (string/blank? q)
                            (if db-tag?
@@ -343,7 +343,7 @@
 (rum/defc template-search-aux
   [id q]
   (let [[matched-templates set-matched-templates!] (rum/use-state nil)]
-    (rum/use-effect! (fn []
+    (hooks/use-effect! (fn []
                        (p/let [result (editor-handler/<get-matched-templates q)]
                          (set-matched-templates! result)))
                      [q])
@@ -376,7 +376,7 @@
     (when input
       (let [q (or (:searching-property (editor-handler/get-searching-property input))
                   "")]
-        (rum/use-effect!
+        (hooks/use-effect!
          (fn []
            (p/let [matched-properties (editor-handler/<get-matched-properties q)]
              (set-matched-properties! matched-properties)))
@@ -396,7 +396,7 @@
 (rum/defc property-value-search-aux
   [id property q]
   (let [[values set-values!] (rum/use-state nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (p/let [result (editor-handler/get-matched-property-values property q)]
          (set-values! result)))
@@ -430,7 +430,7 @@
 
 (rum/defc code-block-mode-keyup-listener
   [_q _edit-content last-pos current-pos]
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (when (< current-pos last-pos)
        (state/clear-editor-action!)))
@@ -650,7 +650,7 @@
 
 (rum/defc shui-editor-popups
   [id format action _data]
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (let [pid (case action
                  :commands

src/main/frontend/components/file_based/block.cljs

@@ -11,7 +11,8 @@
             [frontend.util.file-based.drawer :as drawer]
             [frontend.state :as state]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (defn marker-switch
   [{:block/keys [marker] :as block}]
@@ -115,7 +116,7 @@
 (rum/defc timestamp-editor
   [ast *show-datapicker?]
   (let [*trigger-ref (rum/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [pid (shui/popup-show!
                   (.closest (rum/deref *trigger-ref) "a")

src/main/frontend/components/file_sync.cljs

@@ -31,7 +31,8 @@
             [cljs-time.core :as t]
             [cljs-time.coerce :as tc]
             [goog.functions :refer [debounce]]
-            [logseq.common.util :as common-util]))
+            [logseq.common.util :as common-util]
+            [frontend.hooks :as hooks]))
 
 (declare maybe-onboarding-show)
 (declare open-icloud-graph-clone-picker)
@@ -39,7 +40,7 @@
 (rum/defc clone-local-icloud-graph-panel
   [repo graph-name close-fn]
 
-  (rum/use-effect!
+  (hooks/use-effect!
    #(some->> (state/sub :file-sync/jstour-inst)
              (.complete))
    [])
@@ -120,7 +121,7 @@
 (rum/defc create-remote-graph-panel
   [repo graph-name close-fn]
 
-  (rum/use-effect!
+  (hooks/use-effect!
    #(some->> (state/sub :file-sync/jstour-inst)
              (.complete))
    [])
@@ -194,7 +195,7 @@
   [sync-state sync-progress
    {:keys [idle? syncing? no-active-files? online? history-files? queuing?]}]
 
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      #(reset! *last-calculated-time nil))
    [])
@@ -241,7 +242,7 @@
                                           (-> (storage/get :ui/file-sync-active-file-list?)
                                               (#(if (nil? %) true %))))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js outer-class-list
                   (some-> (rum/deref *el-ref)
@@ -575,7 +576,7 @@
         get-version-key #(or (:VersionUUID %) (:relative-path %))]
 
     ;; fetch version files
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-not loading?
          (async/go
@@ -623,7 +624,7 @@
         *ref-contents      (rum/use-ref (atom {}))
         original-page-name (or (:block/title page-entity) page-name)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(when selected-page
         (set-content-ready? false)
         (let [k               (get-version-key selected-page)
@@ -653,7 +654,7 @@
                   (load-file' repo-url relative-path)))))))
      [selected-page])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (state/update-state! :editor/hidden-editors #(conj % page-name))
 

src/main/frontend/components/git.cljs

@@ -6,7 +6,8 @@
             [clojure.string :as string]
             [frontend.handler.shell :as shell]
             [frontend.handler.file :as file]
-            [frontend.state :as state]))
+            [frontend.state :as state]
+            [frontend.hooks :as hooks]))
 
 (rum/defcs set-git-username-and-email <
   (rum/local "" ::username)
@@ -50,7 +51,7 @@
   (let
    [[content set-content!] (rum/use-state  nil)
     [hash  set-hash!] (rum/use-state   "HEAD")]
-    (rum/use-effect! (fn [] (p/let [c (get-content hash path)] (set-content! c)) [hash path]))
+    (hooks/use-effect! (fn [] (p/let [c (get-content hash path)] (set-content! c)) [hash path]))
     [:div.flex
      [:div.overflow-y-auto {:class "w-48 max-h-[calc(85vh_-_4rem)] "}
       [:div.font-bold "File history - " path]

src/main/frontend/components/handbooks.cljs

@@ -3,7 +3,8 @@
             [frontend.state :as state]
             [frontend.modules.layout.core :as layout]
             ;[shadow.lazy :as lazy]
-            [frontend.extensions.handbooks.core :as handbooks]))
+            [frontend.extensions.handbooks.core :as handbooks]
+            [frontend.hooks :as hooks]))
 
 #_:clj-kondo/ignore
 ;(def lazy-handbooks (lazy/loadable frontend.extensions.handbooks.core/content))
@@ -12,7 +13,7 @@
 ;  []
 ;  (let [[content set-content] (rum/use-state nil)]
 ;
-;    (rum/use-effect!
+;    (hooks/use-effect!
 ;     (fn []
 ;       (lazy/load lazy-handbooks #(set-content %))) [])
 ;
@@ -22,7 +23,7 @@
 (rum/defc handbooks-popup
   []
   (let [popup-ref (rum/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js popup-el (rum/deref popup-ref)]
          (comp

src/main/frontend/components/header.cljs

@@ -34,7 +34,8 @@
             [logseq.shui.util :as shui-util]
             [missionary.core :as m]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (rum/defc home-button
   < {:key-fn #(identity "home-button")}
@@ -234,7 +235,7 @@
 (rum/defc updater-tips-new-version
   [t]
   (let [[downloaded, set-downloaded] (rum/use-state nil)
-        _ (rum/use-effect!
+        _ (hooks/use-effect!
            (fn []
              (when-let [channel (and (util/electron?) "auto-updater-downloaded")]
                (let [callback (fn [_ args]
@@ -265,12 +266,12 @@
   []
   (let [[recent-days set-recent-days!] (rum/use-state (state/get-highlight-recent-days))
         [thumb-ref set-thumb-ref!] (rum/use-state nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when thumb-ref
          (.focus ^js thumb-ref)))
      [thumb-ref])
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [all-nodes (d/by-class "ls-block")
              recent-node (fn [node]

src/main/frontend/components/icon.cljs

@@ -228,7 +228,7 @@
 
 (rum/defc tab-observer
   [tab {:keys [reset-q!]}]
-  (rum/use-effect!
+  (hooks/use-effect!
    #(reset-q!)
    [tab])
   nil)
@@ -271,7 +271,7 @@
                    40 (do (focus! (+ idx 9) :next) (util/stop e))
                    :dune))))) [])]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
         ;; calculate items
        (let [^js sections (.querySelectorAll (get-cnt) ".pane-section")
@@ -306,7 +306,7 @@
                             :size :sm :variant :outline
                             :class "it" :style {:background-color c}}
                            (if c "" (shui/tabler-icon "minus" {:class "scale-75 opacity-70"}))))]))]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js picker (some-> (rum/deref *el) (.closest ".cp__emoji-icon-picker"))]
          (let [color (if (string/blank? color) "inherit" color)]
@@ -454,7 +454,7 @@
                            (when-not (true? keep-popup?) (shui/popup-hide! id)))
               :icon-value icon-value
               :del-btn? del-btn?})))]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when initial-open?
          (js/setTimeout #(some-> (rum/deref *trigger-ref) (.click)) 32)))

src/main/frontend/components/imports.cljs

@@ -31,7 +31,8 @@
             [logseq.shui.form.core :as form-core]
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 ;; Can't name this component as `frontend.components.import` since shadow-cljs
 ;; will complain about it.
@@ -429,7 +430,7 @@
 
 (rum/defc import-indicator
   [importing?]
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (when (and importing? (not (shui-dialog/get-modal :import-indicator)))
        (shui/dialog-open! indicator-progress

src/main/frontend/components/objects.cljs

@@ -20,7 +20,8 @@
             [logseq.outliner.property :as outliner-property]
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (defn- get-class-objects
   [class]
@@ -134,7 +135,7 @@
                     (concat before-cols [(build-asset-file-column config)] after-cols))
                   columns)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (nil? loading?)
          (set-loading? true)
@@ -230,7 +231,7 @@
         [data set-data!] (rum/use-state objects)
         columns (views/build-columns config properties)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (set-loading? true)
        (p/let [_result (db-async/<get-views (state/get-current-repo) (:db/id property))

src/main/frontend/components/page.cljs

@@ -48,7 +48,8 @@
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (defn- get-page-name
   [state]
@@ -140,8 +141,8 @@
           focus! (fn [] (js/setTimeout #(some-> (rum/deref *el-ref) (.focus)) 16))]
 
       ;; mounted
-      ;(rum/use-effect! #(focus!) [])
-      (rum/use-effect! #(if selected? (focus!)
+      ;(hooks/use-effect! #(focus!) [])
+      (hooks/use-effect! #(if selected? (focus!)
                             (some-> (rum/deref *el-ref) (.blur))) [selected?])
 
       (shui/trigger-as
@@ -273,7 +274,7 @@
 (rum/defc tagged-pages
   [repo tag tag-title]
   (let [[pages set-pages!] (rum/use-state nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (p/let [result (db-async/<get-tag-pages repo (:db/id tag))]
          (set-pages! result)))
@@ -453,7 +454,7 @@
   (let [[with-actions? set-with-actions!] (rum/use-state false)
         *el (rum/use-ref nil)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (and (not config/publishing?)
                   (some-> (rum/deref *el) (.closest "#main-content-container")))

src/main/frontend/components/plugins.cljs

@@ -21,7 +21,8 @@
             [frontend.util :as util]
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (declare open-waiting-updates-modal!)
 (defonce PER-PAGE-SIZE 15)
@@ -134,7 +135,7 @@
 
 (rum/defc unpacked-plugin-loader
   [unpacked-pkg-path]
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (let [err-handle
            (fn [^js e]
@@ -698,7 +699,7 @@
   (let [^js inViewState (ui/useInView #js {:threshold 0})
         in-view?        (.-inView inViewState)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (load-more!))
      [in-view?])
@@ -1043,13 +1044,13 @@
          id      (str "slot__" rs)
          *el-ref (rum/use-ref nil)]
 
-     (rum/use-effect!
+     (hooks/use-effect!
       (fn []
         (let [timer (js/setTimeout #(callback {:type type :slot id :payload payload}) 50)]
           #(js/clearTimeout timer)))
       [id])
 
-     (rum/use-effect!
+     (hooks/use-effect!
       (fn []
         (let [el (rum/deref *el-ref)]
           #(when-let [uis (seq (.querySelectorAll el "[data-injected-ui]"))]
@@ -1073,7 +1074,7 @@
         uni    #(str prefix "injected-ui-item-" %)
         ^js pl (js/LSPluginCore.registeredPlugins.get (name pid))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js el (rum/deref *el)]
          (js/LSPlugin.pluginHelpers.setupInjectedUI.call
@@ -1155,7 +1156,7 @@
   (let [*wrap-el (rum/use-ref nil)
         [right-sidebar-resized] (rum-utils/use-atom ui-handler/*right-sidebar-resized-at)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js wrap-el (rum/deref *wrap-el)]
          (when-let [^js header-el (.closest wrap-el ".cp__header")]
@@ -1224,11 +1225,11 @@
         *cm (rum/use-ref nil)
         *el (rum/use-ref nil)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(set-content1! content)
      [content])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (some-> (rum/deref *el)
                (.closest ".ui-fenced-code-wrap")
@@ -1242,7 +1243,7 @@
          (.setCursor cm (.lineCount cm) (count (.getLine cm (.lastLine cm))))))
      [editor-active?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [t (js/setTimeout
                 #(when-let [^js cm (some-> (rum/deref *el)
@@ -1279,13 +1280,13 @@
         market? (= active :marketplace)
         *el-ref (rum/create-ref)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (state/load-app-user-cfgs)
        #(clear-dirties-states!))
      [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(clear-dirties-states!)
      [market?])
 
@@ -1346,7 +1347,7 @@
                         (catch js/Error _
                           (set-uid (notification/show! content status false nil nil cb)))))))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (if check-pending?
          (notify!
@@ -1357,7 +1358,7 @@
          (when uid (notification/clear! uid))))
      [check-pending? sub-content])
 
-    (rum/use-effect!
+    (hooks/use-effect!
       ;; scheduler for auto updates
      (fn []
        (when online?
@@ -1427,7 +1428,7 @@
 
 (rum/defc custom-js-installer
   [{:keys [t current-repo db-restoring? nfs-granted?]}]
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (when (and (not db-restoring?)
                 (or (not util/nfs?) nfs-granted?))

src/main/frontend/components/plugins_settings.cljs

@@ -7,7 +7,8 @@
             [frontend.util :as util]
             [goog.functions :refer [debounce]]
             [logseq.shui.ui :as shui]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (defn- dom-purify
   [html opts]
@@ -119,7 +120,7 @@
         [edit-mode, set-edit-mode!] (rum/use-state nil) ;; code
         update-setting! (fn [k v] (.set plugin-settings (name k) (bean/->js v)))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [on-change (fn [^js s]
                          (when-let [s (bean/->clj s)]

src/main/frontend/components/property.cljs

@@ -32,7 +32,8 @@
             [logseq.outliner.property :as outliner-property]
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (defn- <add-property-from-dropdown
   "Adds an existing or new property from dropdown. Used from a block or page context."
@@ -145,7 +146,7 @@
   (let [[properties set-properties!] (rum/use-state nil)
         [classes set-classes!] (rum/use-state nil)
         [excluded-properties set-excluded-properties!] (rum/use-state nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (p/let [repo (state/get-current-repo)
                properties (db-async/<db-based-get-all-properties repo)

src/main/frontend/components/property/config.cljs

@@ -27,7 +27,8 @@
             [logseq.shui.popup.core :as shui-popup]
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (defn- re-init-commands!
   "Update commands after task status and priority's closed values has been changed"
@@ -83,7 +84,7 @@
   [property {:keys [multiple-choices? disabled? default-open? no-class? on-hide]
              :or {multiple-choices? true}}]
   (let [*ref (rum/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when default-open?
          (some-> (rum/deref *ref)
@@ -160,7 +161,7 @@
         title (util/trim-safe (:title form-data))
         description (util/trim-safe (:description form-data))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (js/setTimeout #(some-> (rum/deref *el) (.focus)) 32))
      [])
@@ -211,7 +212,7 @@
         [form-data, set-form-data!] (rum/use-state (rum/deref *form-data))
         *input-ref (rum/use-ref nil)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when create?
          (js/setTimeout #(some-> (rum/deref *input-ref) (.focus)) 60)))

src/main/frontend/components/property/value.cljs

@@ -37,7 +37,8 @@
             [logseq.outliner.property :as outliner-property]
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (rum/defc property-empty-btn-value
   [property & opts]
@@ -79,7 +80,7 @@
                         :logseq.property/icon))
                      (clear-overlay!))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when editing?
          (clear-overlay!)
@@ -373,7 +374,7 @@
 (rum/defc overdue
   [date content]
   (let [[current-time set-current-time!] (rum/use-state (t/now))]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [timer (js/setInterval (fn [] (set-current-time! (t/now))) (* 1000 60 3))]
          #(js/clearInterval timer)))
@@ -444,7 +445,7 @@
                           (shui/popup-show! (.-target e) content-fn
                                             {:align "start" :auto-focus? true}))))
         repeated-task? (:logseq.task/repeated? block)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when editing?
          (js/setTimeout
@@ -785,7 +786,7 @@
         parent-property? (= (:db/ident property) :logseq.property/parent)]
     (when (and (not parent-property?) (seq non-root-classes))
       ;; effect runs once
-      (rum/use-effect!
+      (hooks/use-effect!
        (fn []
          (p/let [result (p/all (map (fn [class] (db-async/<get-tag-objects repo (:db/id class))) non-root-classes))
                  result' (distinct (apply concat result))]
@@ -1025,7 +1026,7 @@
   [block property value value-f select-opts opts]
   (let [*el (rum/use-ref nil)]
     ;; Open popover initially when editing a property
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (:editing? opts)
          (.click (rum/deref *el))))
@@ -1169,7 +1170,7 @@
         items (cond->> (if (de/entity? v) #{v} v)
                 (= (:db/ident property) :block/tags)
                 (remove (fn [v] (contains? ldb/hidden-tags (:db/ident v)))))]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when editing?
          (.click (rum/deref *el))))

src/main/frontend/components/query.cljs

@@ -15,7 +15,8 @@
             [lambdaisland.glogi :as log]
             [rum.core :as rum]
             [frontend.config :as config]
-            [logseq.db :as ldb]))
+            [logseq.db :as ldb]
+            [frontend.hooks :as hooks]))
 
 (defn- built-in-custom-query?
   [title]
@@ -184,7 +185,7 @@
 (rum/defc trigger-custom-query
   [config q]
   (let [[result set-result!] (rum/use-state nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (query-result/trigger-custom-query! config q (:*query-error config) set-result!))
      [q])

src/main/frontend/components/query/builder.cljs

@@ -24,7 +24,8 @@
             [logseq.db.frontend.property.type :as db-property-type]
             [logseq.db.sqlite.util :as sqlite-util]
             [frontend.db-mixins :as db-mixins]
-            [logseq.db :as ldb]))
+            [logseq.db :as ldb]
+            [frontend.hooks :as hooks]))
 
 (rum/defc page-block-selector
   [*find]
@@ -145,7 +146,7 @@
         properties (cond->> properties
                      (not @*private-property?)
                      (remove ldb/built-in?))]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (p/let [properties (db-async/<get-all-properties {:remove-built-in-property? false
                                                          :remove-non-queryable-built-in-property? true})]
@@ -206,7 +207,7 @@
         property-type (when db-graph? (get-in (db/entity repo @*property) [:block/schema :type]))
         ref-property? (and db-graph? (contains? db-property-type/all-ref-property-types property-type))
         [values set-values!] (rum/use-state nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (p/let [result (if db-graph?
                         (db-async/<get-block-property-values repo @*property)
@@ -225,7 +226,7 @@
   [repo *tree opts loc]
   (let [[values set-values!] (rum/use-state nil)
         db-based? (config/db-based-graph? repo)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [result (db-model/get-all-readable-classes repo {:except-root-class? true})]
          (set-values! result)))

src/main/frontend/components/right_sidebar.cljs

@@ -23,7 +23,8 @@
             [logseq.shui.ui :as shui]
             [medley.core :as medley]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (rum/defc toggle
   []
@@ -305,7 +306,7 @@
                              width (str value "%")]
                          (.setAttribute (rum/deref el-ref) "aria-valuenow" value)
                          (ui-handler/persist-right-sidebar-width! width))))]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [el (and (fn? js/window.interact) (rum/deref el-ref))]
          (-> (js/interact el)
@@ -357,7 +358,7 @@
        #())
      [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
         ;; sidebar animation duration
        (js/setTimeout

src/main/frontend/components/server.cljs

@@ -9,7 +9,8 @@
    [frontend.state :as state]
    [frontend.util :as util]
    [frontend.handler.notification :as notification]
-   [frontend.ui :as ui]))
+   [frontend.ui :as ui]
+   [frontend.hooks :as hooks]))
 
 (rum/defcs panel-of-tokens
   < rum/reactive
@@ -124,7 +125,7 @@
 (rum/defc server-indicator
   [server-state]
 
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (p/let [_ (p/delay 1000)
              _ (ipc/ipc :server/load-state)]
@@ -138,7 +139,7 @@
         running? (= :running status)
         href     (and running? (str "http://" (:host server-state) ":" (:port server-state)))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(when error
         (notification/show! (str "[Server] " error) :error))
      [error])

src/main/frontend/components/settings.cljs

@@ -36,7 +36,8 @@
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (defn toggle
   [label-for name state on-toggle & [detail-text]]
@@ -1174,7 +1175,7 @@
   < rum/static
   [active]
 
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (let [active (and (sequential? active) (name (first active)))
            ^js ds (.-dataset js/document.body)]

src/main/frontend/components/shortcut.cljs

@@ -47,7 +47,7 @@
 
   (let [keypressed? (not= "" keystroke)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [key-handler (KeyHandler. js/document)]
           ;; setup
@@ -236,7 +236,7 @@
                 (set-key-conflicts! conflicts-map)))))]
 
     ;; TODO: back interaction for the shui dialog
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [mid (shui-dialog/get-first-modal-id)
              mid' (shui-dialog/get-last-modal-id)
@@ -249,7 +249,7 @@
                      (.click)) 200))))
      [modal-life])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [^js el (rum/deref *ref-el)
              key-handler (KeyHandler. el)
@@ -385,7 +385,7 @@
                               (set-folded-categories! #{})
                               (set-folded-categories! all-categories))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (js/setTimeout #(set-ready! true) 100))
      [])

src/main/frontend/components/theme.cljs

@@ -14,12 +14,13 @@
             [frontend.ui :as ui]
             [frontend.util :as util]
             [logseq.shui.ui :as shui]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (rum/defc scrollbar-measure
   []
   (let [*el (rum/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [el (rum/deref *el)]
          (let [w (- (.-offsetWidth el) (.-clientWidth el))
@@ -40,7 +41,7 @@
   (let [mounted-fn (use-mounted)
         [restored-sidebar? set-restored-sidebar?] (rum/use-state false)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(let [^js doc js/document.documentElement
             ^js cls (.-classList doc)
             ^js cls-body (.-classList js/document.body)]
@@ -54,36 +55,36 @@
      [theme])
 
     ;; theme color
-    (rum/use-effect!
+    (hooks/use-effect!
      #(some-> js/document.documentElement
               (.setAttribute "data-color"
                              (or accent-color "logseq")))
      [accent-color])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(some-> js/document.documentElement
               (.setAttribute "data-font" (or editor-font "default")))
      [editor-font])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(let [doc js/document.documentElement]
         (.setAttribute doc "lang" preferred-language)))
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(js/setTimeout
        (fn [] (when-not @*once-theme-loaded?
                 (ipc/ipc :theme-loaded)
                 (vreset! *once-theme-loaded? true))) 100) ; Wait for the theme to be applied
      [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(when (and restored-sidebar?
                  (mounted-fn))
         (plugin-handler/hook-plugin-app :sidebar-visible-changed {:visible sidebar-open?})
         (ui-handler/persist-right-sidebar-state!))
      [sidebar-open? restored-sidebar? sidebar-blocks-len])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(when config/lsp-enabled?
         (plugin-handler/load-plugin-preferences)
         (comp
@@ -91,14 +92,14 @@
          (plugin-config-handler/setup-install-listener!)))
      [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (ui-handler/reset-custom-css!)
        (pdf/reset-current-pdf!)
        (plugin-handler/hook-plugin-app :current-graph-changed {}))
      [current-repo])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(let [db-restored? (false? db-restoring?)]
         (if db-restoring?
           (util/set-title! (t :loading))
@@ -106,7 +107,7 @@
             (route-handler/update-page-title! route))))
      [nfs-granted? db-restoring? route])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-not db-restoring?
          (let [repos (state/get-repos)]
@@ -121,12 +122,12 @@
                (set-restored-sidebar? true))))))
      [db-restoring?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(when system-theme?
         (ui/setup-system-theme-effect!))
      [system-theme?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (if settings-open?
          (shui/dialog-open!
@@ -138,7 +139,7 @@
          (shui/dialog-close! :app-settings)))
      [settings-open?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(storage/set :file-sync/onboarding-state onboarding-state)
      [onboarding-state])
 

src/main/frontend/components/user/login.cljs

@@ -10,7 +10,8 @@
             [cljs-bean.core :as bean]
             [frontend.handler.notification :as notification]
             [frontend.state :as state]
-            [frontend.config :as config]))
+            [frontend.config :as config]
+            [frontend.hooks :as hooks]))
 
 (declare setupAuthConfigure! LSAuthenticator)
 
@@ -40,7 +41,7 @@
   (let [session  (:signInUserSession user)
         username (:username user)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
       (fn []
         (when session
           (user/login-callback session)
@@ -58,7 +59,7 @@
         [tab, set-tab!] (rum/use-state :login)
         *ref-el (rum/use-ref nil)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
       (fn [] (setup-configure!)
         (set-ready? true)
         (js/setTimeout
@@ -72,7 +73,7 @@
                       (set-tab! :create-account)))))))))
       [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
       (fn []
         (when-let [^js el (rum/deref *ref-el)]
           (js/setTimeout

src/main/frontend/components/views.cljs

@@ -27,7 +27,8 @@
             [logseq.shui.table.core :as table-core]
             [logseq.db :as ldb]
             [frontend.config :as config]
-            [frontend.db-mixins :as db-mixins]))
+            [frontend.db-mixins :as db-mixins]
+            [frontend.hooks :as hooks]))
 
 (defn- get-latest-entity
   [e]
@@ -335,14 +336,14 @@
         add-resizing-class #(dom/add-class! js/document.documentElement "is-resizing-buf")
         remove-resizing-class #(dom/remove-class! js/document.documentElement "is-resizing-buf")]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (number? dx)
          (some-> (rum/deref *el)
                  (dom/set-style! :transform (str "translate3D(" dx "px , 0, 0)")))))
      [dx])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [el (and (fn? js/window.interact) (rum/deref *el))]
          (let [*field-rect (atom nil)
@@ -399,7 +400,7 @@
                (.on "mousedown" util/stop-propagation)))))
      [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (number? width)
          (on-sized! width)))
@@ -456,7 +457,7 @@
   [table row column render cell-opts idx first-col-rendered? set-first-col-rendered!]
   (let [primary-key? (or (= idx 1) (= (:id column) :block/title))]
     (when primary-key?
-      (rum/use-effect!
+      (hooks/use-effect!
        (fn []
          (let [timeout (js/setTimeout #(set-first-col-rendered! true) 0)]
            #(js/clearTimeout timeout)))
@@ -1092,7 +1093,7 @@
         [ready? set-ready?] (rum/use-state false)
         *rows-wrap (rum/use-ref nil)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn [] (set-ready? true))
      [])
 
@@ -1165,7 +1166,7 @@
   [option {:keys [data columns state data-fns]} input input-filters set-input-filters! *scroller-ref gallery?]
   (let [{:keys [filters sorting]} state
         {:keys [set-row-filter! set-data!]} data-fns]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [new-input-filters [input filters]]
          (when-not (= input-filters new-input-filters)
@@ -1176,7 +1177,7 @@
                 (row-matched? row input filters)))))))
      [input filters])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        ;; Entities might be outdated
        (let [;; TODO: should avoid this for better performance, 300ms for 40k pages

src/main/frontend/extensions/handbooks/core.cljs

@@ -123,7 +123,7 @@
 (rum/defc chapter-select
   [topic children on-select]
   (let [[open?, set-open?] (rum/use-state false)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js el (js/document.querySelector "[data-identity=logseq-handbooks]")]
          (let [h #(when-not (some->> (.-target %)
@@ -158,7 +158,7 @@
         *id-ref (rum/use-ref (str "glide--" (js/Date.now)))]
 
     ;; load deps assets
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (set-deps-pending? true)
        (-> (load-glide-assets!)
@@ -168,7 +168,7 @@
            (p/finally #(set-deps-pending? false))))
      [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (js/setTimeout #(some-> (js/document.querySelector ".cp__handbooks-content")
                                (.scrollTo 0 0))))
@@ -332,11 +332,11 @@
         reset-q! #(->> "" (set! (.-value (rum/deref *input-ref))) (set-q!))
         focus-q! #(some-> (rum/deref *input-ref) (.focus))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      #(focus-q!)
      [pane-state])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [pane-nodes (:children (second pane-state))
              pane-nodes (and (seq pane-nodes)
@@ -437,7 +437,7 @@
   (let [[config _] (r/use-atom *config)
         discord-count (:discord-online config)]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (or (nil? discord-count)
                  (> (- (js/Date.now) (:discord-online-created config)) (* 10 60 1000)))
@@ -538,12 +538,12 @@
                    [])]
 
     ;; load handbooks
-    (rum/use-effect!
+    (hooks/use-effect!
      #(load-handbooks!)
      [])
 
     ;; navigation sentry
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when (seq handbooks-nodes)
          (let [c (:handbook/route-chan @state/state)]
@@ -556,7 +556,7 @@
            #(async/go (>! c :return)))))
      [handbooks-nodes])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [*cnt-len (atom 0)
              check! (fn []
@@ -572,7 +572,7 @@
          #(js/clearInterval timer0)))
      [dev-watch?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when handbooks-data
          (let [nodes (->> (tree-seq map? :children handbooks-data)

src/main/frontend/extensions/pdf/core.cljs

@@ -58,7 +58,7 @@
 
 (rum/defc pdf-page-finder < rum/static
   [^js viewer]
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (when viewer
        (when-let [_ (:pdf/current @state/state)]
@@ -85,7 +85,7 @@
         group-id (.-$groupIdentity viewer)]
 
     ;; draggable handler
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [el (and (fn? js/window.interact) (rum/deref el-ref))]
          (-> (js/interact el)
@@ -116,7 +116,7 @@
    {:keys [highlight point ^js selection]}
    {:keys [clear-ctx-menu! add-hl! upd-hl! del-hl!]}]
 
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (let [cb  #(clear-ctx-menu!)
            doc (pdf-windows/resolve-own-document viewer)]
@@ -188,7 +188,7 @@
 
                        (and clear? (js/setTimeout #(clear-ctx-menu!) 68))))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (if new-&-highlight-mode?
          ;; wait for selection cleared ...
@@ -292,13 +292,13 @@
                               (.setData dt "text/plain" (str "((" id "))"))))
         update-hl!        (fn [hl] (some-> (rum/deref *ops-ref) (:upd-hl!) (apply [hl])))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (rum/set-ref! *ops-ref ops))
      [ops])
 
     ;; resizable
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [^js el (rum/deref *el)
              ^js it (-> (js/interact el)
@@ -471,7 +471,7 @@
                                    (set-end! (calc-coords! (.-pageX e) (.-pageY e))))
                                  [])]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js/HTMLElement root cnt-el]
          (let [fn-start (fn [^js/MouseEvent e]
@@ -592,7 +592,7 @@
                            (set-highlights! (into [] (remove #(= id (:id %)) highlights)))))]
 
     ;; consume dirtied
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (if (rum/deref *mounted)
          (set-dirty-hls! highlights)
@@ -600,7 +600,7 @@
      [highlights])
 
     ;; selection events
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [fn-selection-ok
              (fn [^js/MouseEvent e]
@@ -655,7 +655,7 @@
      [viewer])
 
     ;; selection context menu
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js/Range sel-range (and (not (:collapsed sel-state)) (:range sel-state))]
          (let [^js point               (:point sel-state)
@@ -682,7 +682,7 @@
      [(:range sel-state)])
 
     ;; render hls
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [grouped-hls (and (sequential? highlights) (group-by :page highlights))]
          (doseq [page loaded-pages]
@@ -743,7 +743,7 @@
         [area-dashed?, _set-area-dashed?] (use-atom *area-dashed?)]
 
     ;; instant pdfjs viewer
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [^js event-bus    (js/pdfjsViewer.EventBus.)
              ^js link-service (js/pdfjsViewer.PDFLinkService. #js {:eventBus event-bus :externalLinkTarget 2})
@@ -794,7 +794,7 @@
      [])
 
     ;; update window title
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js viewer (:viewer state)]
          (when (pdf-windows/check-viewer-in-system-win? viewer)
@@ -803,7 +803,7 @@
      [(:viewer state)])
 
     ;; interaction events
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js viewer (:viewer state)]
          (let [fn-textlayer-ready
@@ -896,7 +896,7 @@
 
     ;; current pdf effects
     (when-not db-based?
-      (rum/use-effect!
+      (hooks/use-effect!
        (fn []
          (when pdf-current
            (pdf-assets/file-based-ensure-ref-page! pdf-current)))
@@ -904,7 +904,7 @@
 
     ;; load highlights
     (if db-based?
-      (rum/use-effect!
+      (hooks/use-effect!
        (fn []
          (when pdf-current
            (let [pdf-block (:block pdf-current)]
@@ -915,7 +915,7 @@
                                    1))
                (set-hls-state! {:initial-hls highlights :latest-hls highlights :loaded true})))))
        [pdf-current])
-      (rum/use-effect!
+      (hooks/use-effect!
        (fn []
          (p/catch
           (p/let [data (pdf-assets/file-based-load-hls-data$ pdf-current)
@@ -948,7 +948,7 @@
                  pdf-current latest-hls extra))
               4000) [pdf-current])]
 
-        (rum/use-effect!
+        (hooks/use-effect!
          (fn []
            (when (= :completed (:status loader-state))
              (p/catch
@@ -962,7 +962,7 @@
          [(:latest-hls hls-state) (:extra hls-state)])))
 
     ;; load document
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [^js loader-el (rum/deref *doc-ref)
              get-doc$      (fn [^js opts] (.-promise (js/pdfjsLib.getDocument opts)))
@@ -982,7 +982,7 @@
          #()))
      [url doc-password])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [error (:error loader-state)]
          (js/console.error "[PDF loader]" (:error loader-state))
@@ -1059,7 +1059,7 @@
         [ready set-ready!] (rum/use-state false)]
 
     ;; load assets
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (p/then
         (pdf-utils/load-base-assets$)
@@ -1067,7 +1067,7 @@
      [])
 
     ;; refresh loader
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (js/setTimeout #(set-ready! true) 100)
        #(set-ready! false))
@@ -1081,7 +1081,7 @@
 (rum/defc playground-effects
   [active]
 
-  (rum/use-effect!
+  (hooks/use-effect!
    (fn []
      (let [flg     "is-pdf-active"
            ^js cls (.-classList js/document.body)]

src/main/frontend/extensions/pdf/toolbar.cljs

@@ -40,7 +40,7 @@
         [hl-block-colored? set-hl-block-colored?] (rum/use-state (state/sub :pdf/block-highlight-colored?))
         [auto-open-ctx-menu? set-auto-open-ctx-menu!] (rum/use-state (state/sub :pdf/auto-open-ctx-menu?))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [el-popup (rum/deref *el-popup)
              cb       (fn [^js e]
@@ -51,26 +51,26 @@
          #(.removeEventListener el-popup "keyup" cb)))
      [])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (storage/set "ls-pdf-area-is-dashed" (boolean area-dashed?)))
      [area-dashed?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [b (boolean hl-block-colored?)]
          (state/set-state! :pdf/block-highlight-colored? b)
          (storage/set "ls-pdf-hl-block-is-colored" b)))
      [hl-block-colored?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [b (boolean auto-open-ctx-menu?)]
          (state/set-state! :pdf/auto-open-ctx-menu? b)
          (storage/set "ls-pdf-auto-open-ctx-menu" b)))
      [auto-open-ctx-menu?])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [cb  #(let [^js target (.-target %)]
                     (when (and (not (some-> (rum/deref *el-popup) (.contains target)))
@@ -182,7 +182,7 @@
                                           :findPrevious    prev?
                                           :matchDiacritics false})))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js doc (resolve-own-container viewer)]
          (let [handler (fn [^js e]
@@ -195,7 +195,7 @@
            #(.removeEventListener doc "click" handler))))
      [viewer])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js bus (.-eventBus viewer)]
          (.on bus "updatefindmatchescount" (fn [^js e]
@@ -210,7 +210,7 @@
                                                (bean/->clj (.-matchesCount e))))))))
      [viewer])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-not (nil? case-sensitive?)
          (do-find! :casesensitivitychange)))
@@ -337,7 +337,7 @@
                                (set-outline-data! (update-in outline-data path merge attrs)))
                              [outline-data])]
 
-      (rum/use-effect!
+      (hooks/use-effect!
        (fn []
          (p/catch
           (p/let [^js data (.getOutline pdf-doc)]
@@ -352,7 +352,7 @@
             (js/console.error "[Load outline Error]" e))))
        [pdf-doc])
 
-      (rum/use-effect!
+      (hooks/use-effect!
        (fn []
          (let [el-outline (rum/deref *el-outline)
                cb         (fn [^js e]
@@ -381,7 +381,7 @@
 (rum/defc area-image-for-db
   [repo id]
   (let [[src set-src!] (rum/use-state nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (p/let [_ (db-async/<get-block repo id {:children? false})
                block (db-model/get-block-by-uuid id)]
@@ -443,7 +443,7 @@
         set-outline-visible! #(set-active-tab! "contents")
         contents?            (= active-tab "contents")]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js doc (resolve-own-container viewer)]
          (let [cb (fn [^js e]
@@ -492,7 +492,7 @@
         doc               (pdf-windows/resolve-own-document viewer)]
 
     ;; themes hooks
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js el (some-> doc (.getElementById (str "pdf-layout-container_" group-id)))]
          (set! (. (. el -dataset) -theme) viewer-theme)
@@ -501,7 +501,7 @@
      [viewer-theme])
 
     ;; export page state
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when viewer
          (.dispatch (.-eventBus viewer) (name :ls-update-extra-state)
@@ -509,7 +509,7 @@
      [viewer current-page-num])
 
     ;; pager hooks
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [total (and viewer (.-numPages (.-pdfDocument viewer)))]
          (let [^js bus (.-eventBus viewer)
@@ -523,7 +523,7 @@
            #(.off bus "pagechanging" page-fn))))
      [viewer])
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [^js input (rum/deref *page-ref)]
          (set! (. input -value) current-page-num)))

src/main/frontend/extensions/tldraw.cljs

@@ -29,7 +29,8 @@
             [frontend.db.async :as db-async]
             [logseq.common.util :as common-util]
             [logseq.shui.ui :as shui]
-            [frontend.util.text :as text-util]))
+            [frontend.util.text :as text-util]
+            [frontend.hooks :as hooks]))
 
 (def tldraw (r/adapt-class (gobj/get TldrawLogseq "App")))
 
@@ -258,7 +259,7 @@
   [page-uuid block-id]
   (let [page-uuid (str page-uuid)
         [loaded-app set-loaded-app] (rum/use-state nil)]
-    (rum/use-effect! (fn []
+    (hooks/use-effect! (fn []
                        (when (and loaded-app block-id)
                          (state/focus-whiteboard-shape loaded-app block-id))
                        #())

src/main/frontend/extensions/zotero.cljs

@@ -15,7 +15,8 @@
             [goog.dom :as gdom]
             [logseq.shui.ui :as shui]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.hooks :as hooks]))
 
 (def term-chan (chan))
 (def debounce-chan-mult (a/mult (api/debounce term-chan 500)))
@@ -67,7 +68,7 @@
 
                         (set-is-searching! false))))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [d-chan (chan)]
          (a/tap debounce-chan-mult d-chan)

src/main/frontend/hooks.cljs

@@ -12,21 +12,25 @@
       (set! (.-current deps-ref) deps))
     (.-current deps-ref)))
 
+#_{:clj-kondo/ignore [:discouraged-var]}
 (defn use-memo
   [f deps & {:keys [equal-fn]}]
   (rum/use-memo f #js[(memo-deps equal-fn deps)]))
 
+#_{:clj-kondo/ignore [:discouraged-var]}
 (defn use-effect!
   "setup-fn will be invoked every render of component when no deps arg provided"
   ([setup-fn] (rum/use-effect! setup-fn))
   ([setup-fn deps & {:keys [equal-fn]}]
    (rum/use-effect! setup-fn #js[(memo-deps equal-fn deps)])))
 
+#_{:clj-kondo/ignore [:discouraged-var]}
 (defn use-layout-effect!
   ([setup-fn] (rum/use-layout-effect! setup-fn))
   ([setup-fn deps & {:keys [equal-fn]}]
    (rum/use-layout-effect! setup-fn #js[(memo-deps equal-fn deps)])))
 
+#_{:clj-kondo/ignore [:discouraged-var]}
 (defn use-callback
   [callback deps & {:keys [equal-fn]}]
   (rum/use-callback callback #js[(memo-deps equal-fn deps)]))

src/main/frontend/mobile/graph_picker.cljs

@@ -14,7 +14,8 @@
    [frontend.fs :as fs]
    [frontend.components.svg :as svg]
    [promesa.core :as p]
-   [logseq.common.path :as path]))
+   [logseq.common.path :as path]
+   [frontend.hooks :as hooks]))
 
 (defn validate-graph-dirname
   [root dirname]
@@ -76,7 +77,7 @@
                                                   (notification/show! (str e) :error)
                                                   (js/console.error e)))))))))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (when-let [^js input (and onboarding-and-home?
                                  (rum/deref *input-ref))]

src/main/frontend/rum.cljs

@@ -5,7 +5,8 @@
             [clojure.string :as string]
             [clojure.walk :as w]
             [daiquiri.interpreter :as interpreter]
-            [rum.core :refer [use-state use-effect!] :as rum]))
+            [rum.core :refer [use-state] :as rum]
+            [frontend.hooks :as hooks]))
 
 ;; copy from https://github.com/priornix/antizer/blob/35ba264cf48b84e6597743e28b3570d8aa473e74/src/antizer/core.cljs
 
@@ -68,7 +69,7 @@
 (defn use-atom-fn
   [a getter-fn setter-fn]
   (let [[val set-val] (use-state (getter-fn @a))]
-    (use-effect!
+    (hooks/use-effect!
      (fn []
        (let [id (str (random-uuid))]
          (add-watch a id (fn [_ _ prev-state next-state]
@@ -93,7 +94,7 @@
 (defn use-mounted
   []
   (let [*mounted (rum/use-ref false)]
-    (use-effect!
+    (hooks/use-effect!
      (fn []
        (rum/set-ref! *mounted true)
        #(rum/set-ref! *mounted false))
@@ -107,7 +108,7 @@
   ([tick]
    (let [[ref set-ref] (rum/use-state nil)
          [rect set-rect] (rum/use-state nil)]
-     (rum/use-effect!
+     (hooks/use-effect!
       (if ref
         (fn []
           (let [update-rect #(set-rect (. ref getBoundingClientRect))

src/main/frontend/ui.cljs

@@ -36,7 +36,8 @@
             [promesa.core :as p]
             [rum.core :as rum]
             [logseq.shui.ui :as shui]
-            [frontend.date :as date]))
+            [frontend.date :as date]
+            [frontend.hooks :as hooks]))
 
 (declare icon)
 
@@ -368,7 +369,7 @@
                       input)))
         [time set-time] (rum/use-state (time-fn))]
 
-    (rum/use-effect!
+    (hooks/use-effect!
      (fn []
        (let [timer (js/setInterval
                     #(set-time (time-fn)) (* 1000 30))]
@@ -1160,7 +1161,7 @@
 (rum/defc indicator-progress-pie
   [percentage]
   (let [*el (rum/use-ref nil)]
-    (rum/use-effect!
+    (hooks/use-effect!
      #(when-let [^js el (rum/deref *el)]
         (set! (.. el -style -backgroundImage)
               (util/format "conic-gradient(var(--ls-pie-fg-color) %s%, var(--ls-pie-bg-color) %s%)" percentage percentage)))