Question about rendering performance when updating state asynchronously about rum HOT 9 CLOSED

And whatever the answer for "why is it updating 3 times" is, I'd personally also like to know how to avoid this :)

from rum.

This is a React question. React batches updates scheduled synchronously in React-controlled phases, such as event handling in this case. When called outside of such controlled phases, such as asynchronously in an event handler in this case, React is not able to batch scheduled updates, thus component update is triggered for every scheduled update. For those cases one can use React's batching API (batchedUpdates), to explicitly batch updates that are out of React's control

from rum.

That's interesting, because the same example in Reagent only renders the component once, even if I update the atoms asynchronously:

(def value1 (r/atom 1))
(def value2 (r/atom 10))
(def value3 (r/atom 100))

(defn render-example []
          (println "Rendering example")
          [:<>
           [:div (str "Values: " @value1 ", " @value2 " and " @value3)]
           [:button {:on-click (fn []
                                 (go
                                   (swap! value1 inc)
                                   (swap! value2 inc)
                                   (swap! value3 inc)))}
            "Increment all (async)"]])

I wonder if Reagent has done some optimisations when multiple Reagent atoms are being updated, so that the component is not rendered between the updates.

from rum.

Yes, Reagent is using its own scheduling and processing queue, Rum used to have that as well, but that was changed to be closer to React, be compatible with concurrent mode and avoid issue with input fields

from rum.

Okay, good to know. Thanks for the answer.

from rum.

The thing though is, how is it possible to batch your own updates when using the reactive mixin? Wouldn't the mixin need to do that? It'd be a bit weird if in fact the solution is to program your own reactive mixin.

from rum.

batching happens on caller's side

(react-dom/unstable_batchedUpdates
  (fn []
    (swap! value1 inc)
    (swap! value2 inc)))

from rum.

I see, thank you very much :) I didn't understand how that feature worked when reading about it.

from rum.

@Jarzka is this closeable?

from rum.