Reagent Component not Re-Rendering on Prop Change

Question

My Reagent component ist a simple div that has a component-did-mount and a component-did-update hook. It draws notes using vexflow.

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn [this]
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (draw-system-with-chord notes))}))

It is used like this.

(defn exercise-one []
  (let [note (re-frame/subscribe [:exercise-one/note])]
    [:div
     [note-bar/note-bar @note]
     [other]
     [components]]))

My event code is the following.

(defn store-exercise-one-note [db [_ note]]
  (assoc-in db [:exercise-one :note-bar :note] note))

(re-frame/reg-event-db
  :exercise-one/store-note
  store-exercise-one-note)

(defn query-exercise-one-note [db]
  (or (get-in db [:exercise-one :note-bar :note])
      [{:octave 4 :key :c}]))

(re-frame/reg-sub
  :exercise-one/note
  query-exercise-one-note)

I verified that the app-db value changes using 10x. Yet the note bar only displays a different note when Hot Reloading kicks in. I believe this is due to the component-did-update hook not being called.

My question is, is this the right way to bind a JavaScript library that renders something? If so, why does my component not update?

Philipp Siegmantel Philipp Siegmantel · Accepted Answer · 2020-05-26T06:39:33

The following fixed the component. See the documentation about form-3 components here

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn []
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (let [new-notes (rest (reagent/argv this))]
                               (apply draw-system-with-chord new-notes)))}))

Reagent Component not Re-Rendering on Prop Change

1 Answers