space.matterandvoid.subscriptions.react-hooks-fulcro — space.matterandvoid/subscriptions 2022.11.13

use-reaction cljs

(use-reaction reaction)

Takes a Reagent Reaction and rerenders the UI component when the Reaction's value changes. Returns the current value of the Reaction

use-reaction-in-ref cljs

(use-reaction-in-ref reaction)

Takes a Reagent Reaction, uses a react ref to cache the Reaction and rerenders the UI component when the Reaction's value changes. Returns the current value of the Reaction

use-sub cljs

(use-sub query)

(use-sub datasource query)

(use-sub datasource query equal?)

A react hook that subscribes to a subscription, the return value of the hook is the return value of the subscription which will cause the consuming React function component to update when the subscription's value updates.

Arguments are a fulcro application whose state atom is a reagent ratom, and a subscription query vector (a vector of a keyword/function and an optional hashmap of arguments).

The single-arity version takes only a query vector and will use the suscription app-context to read the fulcro app from React context.

The underlying subscription is cached in a React ref so it is not re-created across re-renders. By default the subscription will be re-created when the query vector to the subscription changes between renders, using cljs.core/identical? to determine if the query has changed. You can change the equality function equal? by explicitly passing it in as the third arity.

Thus it is expected that the subscription vector is memoized between renders and is invalidated by the calling code when necessary (for example when the arguments map changes values) to achieve optimal rendering performance.

use-sub-map clj/s macro

(use-sub-map query-map)

(use-sub-map datasource query-map)

A react hook that subscribes to multiple subscriptions, the return value of the hook is the return value of the subscriptions which will cause the consuming react function component to update when the subscriptions' values update.

Takes an optional data source (fulcro application) and a hashmap

• keys are keywords (qualified or simple) that you make up.
• values are subscription vectors. Returns a map with the same keys and the values are the subscriptions subscribed and deref'd (thus, being their current values).

You can annotate any of the subscription vectors 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 =).

The single-arity version takes only a query map and will use the suscription datasource-context to read the fulcro app from React context.

use-sub-memo clj/s macro

(use-sub-memo subscription-vector)

(use-sub-memo datasource subscription-vector)

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 =).