refactor: add use-debounced-value hook

src/main/frontend/components/editor.cljs

@@ -19,6 +19,7 @@
             [frontend.handler.paste :as paste-handler]
             [frontend.handler.property.util :as pu]
             [frontend.handler.search :as search-handler]
+            [frontend.hooks :as hooks]
             [frontend.mixins :as mixins]
             [frontend.search :refer [fuzzy-search]]
             [frontend.state :as state]
@@ -146,7 +147,8 @@
                                       (editor-handler/get-matched-classes q)
                                       (editor-handler/<get-matched-blocks q {:nlp-pages? true}))]
                        (set-matched-pages! result))))]
-    (rum/use-effect! search-f [(mixins/use-debounce 50 q)])
+    (rum/use-effect! search-f [(hooks/use-debounced-value q 50)])
+
     (let [matched-pages' (if (string/blank? q)
                            (if db-tag?
                              (db-model/get-all-classes (state/get-current-repo) {:except-root-class? true})

src/main/frontend/components/shortcut.cljs

@@ -213,7 +213,7 @@
         [current-binding set-current-binding!] (rum/use-state (or user-binding binding))
         [key-conflicts set-key-conflicts!] (rum/use-state nil)
 
-        handler-id (hooks/use-memo #(dh/get-group k))
+        handler-id (hooks/use-memo #(dh/get-group k) [])
         dirty? (not= (or user-binding binding) current-binding)
         keypressed? (not= "" keystroke)
         save-keystroke-fn!

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

@@ -533,7 +533,9 @@
                        (set-active-pane-state! next-state))
 
         [scrolled?, set-scrolled!] (rum/use-state false)
-        on-scroll (hooks/use-memo #(util/debounce 100 (fn [^js e] (set-scrolled! (not (< (.. e -target -scrollTop) 10))))))]
+        on-scroll (hooks/use-memo
+                   #(util/debounce 100 (fn [^js e] (set-scrolled! (not (< (.. e -target -scrollTop) 10)))))
+                   [])]
 
     ;; load handbooks
     (rum/use-effect!

src/main/frontend/hooks.cljs

@@ -2,6 +2,7 @@
   "React custom hooks."
   (:refer-clojure :exclude [ref deref])
   (:require [datascript.impl.entity :refer [Entity]]
+            [goog.functions :as gfun]
             [rum.core :as rum]))
 
 (defn- safe-dep
@@ -25,10 +26,11 @@
       (throw (ex-info (str "Not supported dep type:" (type dep)) {:dep dep})))))
 
 (defn use-memo
-  ([f] (rum/use-memo f))
-  ([f deps] (rum/use-memo f (map safe-dep deps))))
+  [f deps]
+  (rum/use-memo f (map safe-dep deps)))
 
 (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] (rum/use-effect! setup-fn (map safe-dep deps))))
 
@@ -37,8 +39,8 @@
   ([setup-fn deps] (rum/use-layout-effect! setup-fn (map safe-dep deps))))
 
 (defn use-callback
-  ([callback] (rum/use-callback callback))
-  ([callback deps] (rum/use-callback callback (map safe-dep deps))))
+  [callback deps]
+  (rum/use-callback callback (map safe-dep deps)))
 
 ;;; unchanged hooks, link to rum/use-xxx directly
 (def use-ref rum/use-ref)
@@ -48,3 +50,13 @@
 
 (def use-state rum/use-state)
 (def use-reducer rum/use-reducer)
+
+;;; other custom hooks
+
+(defn use-debounced-value
+  "Return the debounced value"
+  [value msec]
+  (let [[debounced-value set-value!] (use-state value)
+        cb (use-callback (gfun/debounce set-value! msec) [])]
+    (use-effect! #(cb value) [value])
+    debounced-value))

src/main/frontend/mixins.cljs

@@ -1,10 +1,9 @@
 (ns frontend.mixins
   "Rum mixins for use in components"
-  (:require [rum.core :as rum]
-            [goog.dom :as dom]
+  (:require [frontend.state :as state]
             [frontend.util :refer [profile] :as util]
-            [frontend.state :as state]
-            [goog.functions :as gfun])
+            [goog.dom :as dom]
+            [rum.core :as rum])
   (:import [goog.events EventHandler]))
 
 (defn detach
@@ -147,11 +146,3 @@
        (profile
         (str "Render " desc)
         (render-fn state))))})
-
-(defn use-debounce
-  "A rumext custom hook that debounces the value changes"
-  [ms value]
-  (let [[state update-fn] (rum/use-state value)
-        update-fn (rum/use-callback (gfun/debounce update-fn ms) [])]
-    (rum/use-effect! #(update-fn value) #js [value])
-    state))