Integration of re-frame and react hooks.

app.hooks.cljs

(ns app.hooks
  (:require
   ;; A lib provided by react to make these types of integrations easier:
   ["use-subscription" :as react.use-subscription]
   [re-frame.interop :as rf.interop]
   [re-frame.core :as rf]
   [helix.hooks :as h.hooks] ; cljs wrapper of the react hooks api
   ))

(defn- maybe-dispose! [^clj reaction]
  (when-not (seq (.-watches reaction))
    (rf.interop/dispose! reaction)))

(let [n (atom 0)] ;; incremented int used to get unique keys for add-watch.
  (defn use-sub [query]
    (let [rf-sub (h.hooks/use-memo [query]
                                   (let [r (rf/subscribe query)
                                         ;; If the reaction isn't set to autorun,
                                         ;; watches won't fire when the reaction is "dirty".
                                         ;; Reactions get "dirty" when their inputs change.
                                         ;; Setting :auto-run also seems to avoid an
                                         ;; issue where derefs
                                         ;; trigger setState calls in /other/ components
                                         ;; that subscribe to the same query.
                                         ;; React warns about this:
                                         ;;  https://github.com/facebook/react/issues/18178
                                         _ (._set-opts ^clj r {:auto-run true})]
                                     r))
          sub (h.hooks/use-memo [rf-sub]
                                #js{:getCurrentValue (fn []
                                                       ;; Get rid of any reactive context
                                                       ;; because we don't want
                                                       ;; tracking of this deref.
                                                       (binding [ratom/*ratom-context* nil]
                                                         @rf-sub))
                                    :subscribe (fn [callback]
                                                 (let [k (str "use-sub-" (swap! n inc))]
                                                   (add-watch rf-sub k callback)
                                                   (fn []
                                                     (remove-watch rf-sub k)
                                                     (maybe-dispose! rf-sub))))})]
      (react.use-subscription/useSubscription sub))))