@andrea.crotti https://github.com/gadfly361/breaking-point is a nice and simple impl for re-frame

Hi! I'm working on a very basic chat app with re-frame, but I'm having trouble understanding how to treat side effects. I have the most basic use case for a chat box: Whenever a new message is sent, the scroll box must scroll to the bottom (to simplify, let's say this is done always). So I implemented an event (the message being sent) and an effect (the box scrolling to the bottom). The event triggers the aforementioned effect:

(rf/reg-fx
 ::scroll-chat-to-bottom
 (fn [value]
   (when value
     (let [msg-history (-> js/document (.getElementById "message-history"))]
       (set! (.-scrollTop msg-history) (.-scrollHeight msg-history))))))

(rf/reg-event-fx
 ::send-chat-message
 (fn-traced [{db :db} [_ msg]]
           {:db (update db :chat-messages conj msg)
            ::scroll-chat-to-bottom true}))

So, I'd state the problem as ... What you have at the moment is a side effect called scroll-right-now But what you need is instead a side effect which is scroll-soon-but-after-the-next-render

So the only problem you have is in writing this better side effect ...

Perhaps use https://github.com/reagent-project/reagent/blob/master/src/reagent/core.cljs#L336

Probably a bug in this ... but something like ...

(rf/reg-fx
 ::scroll-chat-to-bottom
 (fn [value]
   (when value
     (reagent/after-render
       (fn []
         (let [msg-history (-> js/document (.getElementById "message-history"))]
         (set! (.-scrollTop msg-history) (.-scrollHeight msg-history)))))))

@jsanchezf ^^^

many thanks!! 😄 I'll try this right away

it works 👍

👍