react

alex 2022-11-02T15:04:37.690289Z

Hi there, I'm looking for a bit of advice on re-parenting child components without mounting and unmounting them and whether it's a sane approach. I'm also very open to this approach being sufficiently complex that it makes more sense to go another route. My use case is that we have Video components laid out in a grid-like fashion, initially side-by-side, then occupying additional rows as needed. At the moment, our React display logic pre-calculates the number of rows that will be needed to support X Video elements, then slots each component into the appropriate row. The problem with this approach is that when the number of components increase/decrease, an individual Video element may be moved into a different row, thus forcing it to be unmounted, then re-mounted. There's quite a bit of setup/teardown logic that's executed each time, so I'd like to avoid that.

;; sample
(for [row rows]
  [:.row
    {:key ...}
    (for [elem-props row]
      (rum/with-key
        (Video elem-props)
        (:id elem-props))])
Is there an easy way to re-parent a Video element across rows? Or would it make more sense to try and remove the Row wrapping at the parent level? This way, the Video elements can visually adjust as needed but get rendered under the same consistent parent + maintain their DOM node

orestis 2022-11-08T12:45:26.955509Z

It looks like flex box or grid would solve this for you at a much simpler layer?

orestis 2022-11-08T12:46:09.702529Z

So yes, remove the Row and have a wrapping flex layout…