Cool thanks @lilactown

Would this have any adverse perf implications if I use it everywhere?

I wouldn't expect it to

everywhere = dynamic children, then yes it would.

React uses the key to determine whether it can just reorder the DOM rather than re-create the node afresh.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

Thanks @dominicm! I started suspecting yesterday that is the cause of my perf problems.

if you’re using just children, then in the component you can use into

but when you pass in those children, you should key them

I think

We have something like this, and almost all of those components are defined using (into [:div] (children this))

(defn product-list
  [products]
  [window
   [view
    [title "Selected products" @(subscribe [:sel-products])]
    [table
     [table-header
      [table-row
       [table-cell ""]
       [table-cell "Name"]
       [table-cell "Price"]]]
     [table-body
      (for [prod (subscribe [:products])]
        ^{:key prod}
        [table-row
         [table-cell [checkbox {:checked (:selected prod)}]]
         [table-cell (:name prod)]
         [table-cell (:price prod)]])]]]
   [app-footer]])

Every time the subscribe to :sel-products changes, the whole product list is re-rendered

You probably want to get the id of the product really, or the name if that's unique.

have you looked at what the key actually is in React DevTools?

IIRC if you pass in an opaque object it will stringify it to [object Object]

We are actually using (keep-indexed) and passing i as key. That list of things doesn’t grow or shrink.

The funny thing is that if I just move [title "Selected Products" @(subscribe [:sel-products])] to a separate component the problem goes away

What I understand is that deref is triggering a [product-list] re-render and reagent for some reason considers that all of the other components inside it should re-render

I don’t think there is something wrong with reagent or React, or even re-frame, I think it has something to do with how I’m defining those components -> (into [:div.class] (children this))

All children are run, then reconciliation happens after.

That's the normal react behaviour, yep

Thanks all for your input, finally found the culprit! 🎉 we were passing curried functions as props

[:ul (for [it items] [:li {:on-click (partial handle-click it)} it])]

Non constant functions can cause issues in some contexts