Hi, I'm a bit puzzled by this paragraph from re-frame docs, is it specific to re-frame or concern reagent as well?

Lifecycle Functions When props change, the entire underlying React machinery is engaged. React Components can have lifecycle methods like component-did-update and these functions will get called, just as they would if you were dealing with a React Component. But ... when the rerender is re-run because an input ratom changed, Lifecycle functions are not run. So, for example, component-did-update will not be called on the Component. Careful of this one. It trips people up.

I commented elsewhere already, but my answer would be: it's not specific to re-frame. The confusing wordings are, in my opinion, "input ratom" and "ratom changed". It should say "When a dereferenced reagent/atom's contents changed, the component is re-rendered, but the lifecycle methods are not run"

I cannot reproduce this behavior (see below code)

(def a (r/atom 1))

    (defn c []
      (r/create-class
        {:reagent-render
         (fn []
           (println "render c with " @a)
           [:div @a])
         :component-will-update
         (fn [this] (println "will-update c"))
         :should-component-update
         (fn [this] (println "should-update c"))
         :component-did-update
         (fn [this] (println "did-update c"))}))

    (r/render-component
      [c]
      (.getElementById js/document "app"))

    (reset! a (rand-int 10)) 

;=> render c with  1
;=> will-update c
;=> render c with  6
;=> did-update c

this is triggering component-did-update, it should not accordingly to above paragraph

?

You can format code blocks by surrounding it with three ` btw 🙂

@pbaille can you add other lifecycle methods too, and see if those are called?

yes I will try that

done, should update is not called

(def a (r/atom 1))

    (defn c [x]
      (r/create-class
        {:reagent-render
         (fn [x]
           (println "render c with " x)
           [:div x])
         :component-will-update
         (fn [this] (println "will-update c"))
         :should-component-update
         (fn [this] (println "should-update c") true)
         :component-did-update
         (fn [this] (println "did-update c"))}))

    (defn cwrap [] [c @a])

    (r/render-component
      [cwrap]
      (.getElementById js/document "app"))

    (reset! a (rand-int 10))

    ;=> render c with  1
    ;=> should-update c
    ;=> will-update c
    ;=> render c with  2
    ;=> did-update c 

Note that your component c does not get an atom now, it gets a normal number

so you're not testing what you tested originally

yes that's the point

the props changes

contrary to the first case

where the ratom is directly deref in renderfn

Oh, I didn't notice you edited the above piece of code 🙂

🙂

So I guess the end result is, if the component doesn't get props (which is the first argument), component-will-receive-props and should-component-update is never called.

The piece of documentation you pasted is indeed a bit confusing. I'd recommend opening an issue in github, or asking their opinion in #re-frame

yes agree

@mikethompson That was an excellent post and exactly what I needed. Thanks for writing it!

does anyone have experience with https://github.com/madvas/cljs-react-material-ui

I'm having trouble with the tabs checking for tab element when using in reagent.

@pbaille I think that documentation is out of date now

We've noticed the same thing

@danielcompton, ok great

@pbaille If you want to open a docs ticket that'd be awesome

@danielcompton ok I will

@danielcompton , done, but I don’t know how add the docs label

no worries, I think only committers can do that. Thanks!

you’re welcome