extracted from helix zulip chat from a message of wilkerlucio

hooks.cljs

(ns app.util.hooks
  (:require
    ["react" :refer [useState]]
    ))

(defn use-state
  "A simple wrapper around React/useState. Returns a cljs vector for easy destructuring"
  [initial-value]
  (into-array (useState initial-value)))

(defn use-atom-state [initial-value]
  (let [[value set-value!] (use-state initial-value)]
    (reify
      IDeref
      (-deref [o] value)

      IReset
      (-reset! [o new-value] (doto new-value set-value!))

      ISwap
      (-swap! [a f] (set-value! f))
      (-swap! [a f x] (set-value! #(f % x)))
      (-swap! [a f x y] (set-value! #(f % x y)))
      (-swap! [a f x y more] (set-value! #(apply f % x y more))))))

(comment

(defnc Example
  []
  (let [a (use-atom-state 10)]
    (div
      (d/label @a)
      (d/button {:on-click (fn [e]
                             (swap! a inc))}
                "plus"))))
  
  )