Add clj value handling to hooks

Author: Deraen

src/reagent/hooks.cljs

@@ -1,26 +1,81 @@
 (ns reagent.hooks
   (:require ["react" :as react]))
 
+;; Helpers to make hooks use clojure value equality etc.
+;; These are copied from (with permission) or inspired by UIx implementation
+
+(defn with-return-value-check
+  "Consider any non-fn value from effect callbacks as no callback."
+  [f]
+  (fn []
+    (let [ret (f)]
+      (if (fn? ret)
+        ret
+        js/undefined))))
+
+(defn use-clj-deps
+  "Check the new clj deps value against the previous value, stored in a
+  ref hook, so we can use clj equality check to see if the value changed.
+
+  Only not= value is stored to the ref, so the effect dependency value
+  only updates when the equality changed."
+  [deps]
+  (let [ref (react/useRef deps)]
+    (when (not= (.-current ref) deps)
+      (set! (.-current ref) deps))
+    (.-current ref)))
+
+(defn- use-clojure-aware-updater
+  "When update fn returns the equal clj value as the previous value,
+  keep using the old value, to keep the identity stable."
+  [updater]
+  (react/useCallback
+    (fn [v & args]
+      (updater
+        (fn [current-value]
+          (let [new-value (if (fn? v)
+                            (apply v current-value args)
+                            v)]
+            (js/console.log (pr-str current-value) (pr-str new-value) (= new-value current-value))
+            (if (= new-value current-value)
+              current-value
+              new-value)))))
+    #js [updater]))
+
+;; Hooks
+
 (defn use-state [initial-state]
-  (react/useState initial-state))
+  (let [[state set-state] (react/useState initial-state)
+        set-state (use-clojure-aware-updater set-state)]
+    #js [state set-state]))
 
 (defn use-reducer [reducer initial-arg init]
-  (react/useReducer reducer initial-arg init))
+  (react/useReducer (fn [state action]
+                      (let [new-state (reducer state action)]
+                        (if (= new-state state)
+                          state
+                          new-state)))
+                    initial-arg
+                    init))
 
 (defn use-ref [v]
   (react/useRef v))
 
 (defn use-effect [setup dependencies]
-  (react/useEffect setup dependencies))
+  (react/useEffect (with-return-value-check setup)
+                   (array (use-clj-deps dependencies))))
 
 (defn use-layout-effect [setup dependencies]
-  (react/useLayoutEffect setup dependencies))
+  (react/useLayoutEffect (with-return-value-check setup)
+                         (array (use-clj-deps dependencies))))
 
 (defn use-memo [calculate-value dependencies]
-  (react/useMemo calculate-value dependencies))
+  (react/useMemo calculate-value
+                 (array (use-clj-deps dependencies))))
 
 (defn use-callback [f dependencies]
-  (react/useCallback f dependencies))
+  (react/useCallback f
+                     (array (use-clj-deps dependencies))))
 
 (defn use-context [ctx]
   (react/useContext ctx))

test/reagenttest/testhooks.cljs

@@ -14,13 +14,13 @@
 (def ran (atom 0))
 (def update-state (atom nil))
 
-(r/defc foo1 []
+(r/defc state-1 []
   (let [[x set-x] (hooks/use-state 0)]
     (reset! update-state set-x)
     (swap! ran inc)
     [:div "foo " x]))
 
-(r/defc foo2 []
+(r/defc state-2 []
   (let [[x set-x] (hooks/use-state {:foo 0})]
     (reset! update-state set-x)
     (swap! ran inc)
@@ -29,7 +29,8 @@
 (deftest ^:dom use-state-test
   (u/async
     (testing "update state, pure value"
-      (u/with-render [div [foo1]]
+      (reset! ran 0)
+      (u/with-render [div [state-1]]
         (is (= 1 @ran))
         (is (= "foo 0" (.-innerText div)))
 
@@ -39,7 +40,7 @@
 
     (testing "update state, clojure value"
       (reset! ran 0)
-      (u/with-render [div [foo2]]
+      (u/with-render [div [state-2]]
         (is (= 1 @ran))
         (is (= "foo 0" (.-innerText div)))
 
@@ -53,3 +54,39 @@
         (is (= 2 @ran))
         (is (= "foo 1" (.-innerText div)))))))
 
+(def effect-ran (atom 0))
+
+(r/defc effect-1 [x]
+  (hooks/use-effect (fn []
+                      (swap! effect-ran inc)
+                      nil)
+                    [x])
+  (swap! ran inc)
+  [:div "foo " (:foo x)])
+
+(deftest ^:dom use-effect-test
+  (u/async
+    (testing "update state, pure value"
+      (reset! ran 0)
+      (reset! effect-ran 0)
+      (let [x (r/atom {:foo 0})
+            y (r/atom 0)
+            c (fn []
+                [effect-1 @x @y])]
+        (u/with-render [div [c]]
+          (is (= 1 @ran))
+          (is (= 1 @effect-ran))
+          (is (= "foo 0" (.-innerText div)))
+
+          (u/act (swap! x assoc :foo 1))
+          (is (= 2 @ran))
+          (is (= 2 @effect-ran))
+          (is (= "foo 1" (.-innerText div)))
+
+          ;; use-effect wrapper considers clojure equality
+          (u/act (swap! x assoc :foo 1)
+                 (swap! y inc))
+          (is (= 3 @ran))
+          ;; effect didn't ran again because dependency value is the same
+          (is (= 2 @effect-ran))
+          (is (= "foo 1" (.-innerText div))))))))