How to make child component totally re-mount when its props changes.

(defn home-page []
  (re-frame/dispatch-sync [:payload/load :home])
  (let [data (re-frame/subscribe [:payload/data :home])]
    (fn []
      (let [{:keys [banners]} @data]
        (println "render -->" banners)
        [:div {:style {:height "100vh"
                       :width  "100%"}}
         [banner/banner
          {:item-com banner-image
           :items    banners
           :height   120}]]))))

(defn banner [props] 
   ;; HERE should re-render happen at here when props changing?
   (fn []
       ))

;; HERE should re-render happen at here when props changing? Code before the inner render function will only render once on mount in a form-2 component. https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md#form-2--a-function-returning-a-function

If you want to track changes in banner (a form-2 component) you’ll need to destructure them in the inner render function or use with-let https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md#appendix-b---with-let-macro

@doglooksgood

@oconn Isee, so the with-let is kind of an enhancement of form-2? what if I have a timer in with-let and that timer function need to access the newest prop?

I'm a little mess of so many choices

from the official documentation:

(defn timer-component []
  (let [seconds-elapsed (r/atom 0)]
    (fn []
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div
       "Seconds Elapsed: " @seconds-elapsed])))

This one for example updates itself any time the atom changes (it is literally a timer), if you want to see the actual working example https://reagent-project.github.io/

so that's a form 2 example, there's also a form 1 example with changing state.

@hobosarefriends thanks! I think this example remind me something very useful.

Glad to help. oh I just noticed the previous example isn't form-2 :man-shrugging:

This example should how to create a timer, but it's not a real world example, cause it did not destroy the timer. I trying to create a timer with with-let and try to ACCESS THE PROPS in timer function. But this is incorrect, I shouldn't do this. cause the timer will be created only once, it can't get the newest props.

So like this example, I should use timer function as an accumulator. And calculating in the render function.

You lost me, but it seems you have a good idea 😅

i had an idea for loading screen effect basic idea is to have loading effect until main page is ready to be shown once it's ready loading should disappear and main page should be shown i want to avoid partial render of pictures, elements i am not sure how to do this are there any examples in regent or re-frame? effect is similar to https://colorlib.com/demo?theme=colid hopefully u can see it when u first load it

you could have a component that shows the loading screen until a certain value/atom/prop changes and then it renders a hidden version or nothing at all.

just change the atom from the last thing that'll load or if you don't know which is the last... eeehh... check that all the components have loaded somehow? Dunno, sorry I don't have any examples on hand.

we are on the same page but how practically and idiomatically this is done is something different

@lepistane just put out of the screen, when everything ready move into screen?

this is valid i haven't thought about this i will give it a try

Hi guys. I’m trying to implement the render props pattern in a reagent component. But can’t get it to work without the render component fn unmounting if declared anonymously.

Any ideas?

So say the component I’m trying to create is called subscribe. With usage: [subscribe (fn [result] [:div result])] [:div result] is always unmounted and recreated

With an impl of (defn subscribe [child-fn] [child-fn @x])

Apologies for formatting. I’m typing on a phone