Merge pull request #8 from Respo/component-memo

add React.memo for components

macros/reacher/core.clj

@@ -43,6 +43,6 @@
 (defmacro defcomp [def-name params & body]
   (let [func-name (symbol (str "$comp_" (name def-name)))]
   `(do
-    (defn- ~func-name [~@params] ~@body)
+    (def ~func-name (reacher.core/react-memo (fn [~@params] ~@body)))
     (defn ~def-name [& args#]
       (apply react-create-element ~func-name args#)))))

src/reacher/core.cljs

@@ -4,9 +4,16 @@
             ["react-dom" :as DOM]
             [clojure.string :as string]
             [medley.core :as medley]
-            [applied-science.js-interop :as j])
+            [applied-science.js-interop :as j]
+            [clojure.set :as set])
   (:require-macros [reacher.core :refer [div]]))
 
+(defn- compare-props [prev-props next-props]
+  (let [prev-keys (set (js->clj (js/Object.keys prev-props)))
+        next-keys (set (js->clj (js/Object.keys next-props)))]
+    (->> (set/union prev-keys next-keys)
+         (every? (fn [x] (= (j/get prev-props x) (j/get next-props x)))))))
+
 (defn dashed->camel
   ([x] (dashed->camel "" x false))
   ([acc piece promoted?]
@@ -27,6 +34,8 @@
 
 (def react-create-element React/createElement)
 
+(defn react-memo [comp] (React/memo comp compare-props))
+
 (defn transform-props [props]
   (let [result (-> (map-upper-case props) (update :style map-upper-case))]
     (cljs.core/clj->js result)))

src/reacher/example/comp/container.cljs

@@ -38,6 +38,7 @@
  comp-task
  (props)
  (let [task (j/get props :task), dispatch! (use-dispatch)]
+   (comment println "rendering task" task)
    (div
     {:key (:id task), :style (merge ui/row-parted {:padding "0 8px", :width 320})}
     (str (:text task))