Clojurians Log v2

I'm having trouble working with the primereact ui library, specifically this (trimmed for space) templating example from https://primefaces.org/primereact/showcase/#/datatable/templating:

export class DataTableTemplatingDemo extends Component {

    constructor(props) {
        super(props);

        this.state = {
            products: []
        };
        this.ratingBodyTemplate = this.ratingBodyTemplate.bind(this);
        this.statusBodyTemplate = this.statusBodyTemplate.bind(this);
    }

    ratingBodyTemplate(rowData) {
        return <Rating value={rowData.rating} readOnly cancel={false} />;
    }

    statusBodyTemplate(rowData) {
        return <span className={`product-badge status-${rowData.inventoryStatus.toLowerCase()}`}>{rowData.inventoryStatus}</span>;
    }

    render() {
        
        return (
            <div className="datatable-templating-demo">
                <div className="card">
                    <DataTable value={this.state.products}>
                        <Column field="name" header="Name"></Column>
                        <Column field="rating" header="Reviews" body={this.ratingBodyTemplate}></Column>
                        <Column header="Status" body={this.statusBodyTemplate}></Column>
                    </DataTable>
                </div>
            </div>
        );
    }
}

(defn junk-button [_] [:> Button {:label "test"}])

(defn table []
  (let [del-button (r/as-element junk-button)]
    [:> DataTable {:value table-data
                    :on-row-reorder reorder 
                    :resizableColumns true}
      [:> Column {:header "Delete"
                  :body [del-button]}]]))

I have trouble understanding the r/track ...

as far as I understand it should work similarly to make-reaction, as the documentation itself suggests

but...

(defonce app-state (r/atom {:people {1 {:name "John Smith"} 2 {:name "Maggie Johnson"}}})) (defn people [] (print :fire 'people " ") (:people @app-state)) (defn person [id] (print :fire 'person " ") (-> @(r/track people) (get id))) (with-out-str (person 1)) ;; => ":fire person :fire people " (with-out-str (person 1)) ;; => ":fire person :fire people " (with-out-str (person 1)) ;; => ":fire person :fire people "

even though the atom hasn't changed, every time it fires all the functions along the way and it doesn't look like anything is cached

I think the issue here is that person each time returns new instance of defer-able.

https://cljdoc.org/d/reagent/reagent/1.1.0/doc/tutorials/-wip-managing-state-atoms-cursors-reactions-and-tracking especially

it looks like I don't understand reaction either, and I was almost sure I did

(def a (r/atom 10))

(def r1 (ra/reaction (let [n (rand-int @a)] n)))

@r1
;; => 6
@r1
;; => 3

You can't rely on any reactive behavior outside of a reactive context. Views are such a context, when they're rendered by Reagent. Such as other reactions that are themselves used in a reactive context. But REPL is not a reactive context.

I'm pretty sure that's how I tested it in the past

I just tested it in a reactive context. Works just fine.

(ns app.core
  (:require [reagent.core :as reagent]
            [reagent.ratom :as rea]
            [reagent.dom]
            [clojure.browser.dom]))

(defn view [a b]
  (reagent/with-let [x (rea/reaction (+ @a (rand-int 10000)))]
    [:div @x ";" @b]))

(defn app []
  (reagent/with-let [a (reagent/atom 0)
                     b (reagent/atom 0)]
    [:div
     [:button {:on-click #(swap! a inc)} "Inc A"]
     [:button {:on-click #(swap! b inc)} "Inc B"]
     [view a b]]))

(defn ^:export main []
  (reagent.dom/render [app] (clojure.browser.dom/get-element :app)))

So if you press Inc B, the part before ; won't change, as expected.

Thx!