Using a Reagent atom within a Helix component

dvingo · May 13, 2023, 10:34pm

As part of my subscriptions library which makes use or reagent I implemented a react hook to subscribe to reagent atoms, reactions, and cursors.

The entry namespace is here:

github.com

matterandvoid-space/subscriptions/blob/mainline/src/main/space/matterandvoid/subscriptions/react_hooks.clj

(ns space.matterandvoid.subscriptions.react-hooks
  (:require
    [space.matterandvoid.subscriptions.core :as subs]
    [space.matterandvoid.subscriptions.impl.react-hooks-common :as common]
    [space.matterandvoid.subscriptions.impl.reagent-ratom :as ratom]))

(defmacro use-sub
  "Macro that expands expands to `use-sub`, memoizes the subscription vector so that the underlying subscription
  is reused across re-renders by React. If your subscription vector contains an arguments map literal, it is memoized with dependencies
  being the values of the map. If you pass a symbol as the arguments the symbol will be used as the dependency for useMemo;
  thus, you are expected to memoize the arguments yourself in that case.

  If you pass a symbol for the entire subscription vector, no memoization takes place.

  You can annotate the subscription vector with ^:no-memo to emit a plain call to `use-sub` that will not wrap the
  subscription vector in a react/useMemo call.
  You can also pass ^{:memo your-equality-fn} to change the memoization function used (for example to `=`)."
  ([datasource subscription-vector]
   `(do
      (assert (ratom/ratom? ~datasource) (str "You must pass a Reagent Ratom to `use-sub-map` as the datasource, you passed: " (pr-str ~datasource)))

This file has been truncated. show original

and the actual hook implementation is here (which was originally copied/inspired from the one linked above, but found it didn’t work):

github.com

matterandvoid-space/subscriptions/blob/mainline/src/main/space/matterandvoid/subscriptions/impl/react_hooks_common.cljs

(ns space.matterandvoid.subscriptions.impl.react-hooks-common
  (:require-macros [space.matterandvoid.subscriptions.impl.react-hooks-common])
  (:require
    ["react" :as react]
    ["use-sync-external-store/shim/with-selector" :refer [useSyncExternalStoreWithSelector]]
    [goog.object :as gobj]
    [space.matterandvoid.subscriptions.impl.reagent-ratom :as ratom]
    [taoensso.timbre :as log]))

(defn use-memo [f deps] (react/useMemo f deps))

;; The following was adapted from
;; https://github.com/roman01la/hooks/blob/1a98408280892da1abebde206b5ca2444aced1b3/src/hooks/impl.cljs

;; for more on implementation details see https://github.com/reactwg/react-18/discussions/86

(defn use-sync-external-store [subscribe get-snapshot]
  ;; https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore
  ;; this version uses useMemo to avoid rerenders when the snapshot is the same across renders.
  (useSyncExternalStoreWithSelector

This file has been truncated. show original

This implementation memoizes the subscription vectors to prevent needless re-renders, as well as retaining every subscription a component uses for its lifetime so that those subscriptions are cached for the entire lifetime of the component.

A simple example usage is in the readme: