diff --git a/frontend/deps.edn b/frontend/deps.edn
index d4dd3597c..231b30c56 100644
--- a/frontend/deps.edn
+++ b/frontend/deps.edn
@@ -10,7 +10,7 @@
   funcool/beicon {:mvn/version "2021.07.05-1"}
   funcool/okulary {:mvn/version "2022.04.11-16"}
   funcool/potok {:mvn/version "2021.09.20-0"}
-  funcool/rumext {:mvn/version "2022.03.31-133"}
+  funcool/rumext {:mvn/version "2022.04.19-148"}
   funcool/tubax {:mvn/version "2021.05.20-0"}
 
   instaparse/instaparse {:mvn/version "1.4.10"}
diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
index 18bd62c00..66af3edae 100644
--- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs
+++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
@@ -405,7 +405,6 @@
         shape     (obj/get props "shape")
         elem-name (obj/get child "type")
         render-id (mf/use-ctx muc/render-ctx)]
-
     [:g {:id (dm/fmt "fills-%" (:id shape))}
      [:> elem-name (build-fill-props shape child render-id)]]))
 
@@ -434,12 +433,8 @@
 (mf/defc shape-custom-strokes
   {::mf/wrap-props false}
   [props]
-  (let [child     (obj/get props "children")
-        shape     (obj/get props "shape")]
-
+  (let [children (obj/get props "children")
+        shape    (obj/get props "shape")]
     [:*
-     [:& shape-fills {:shape shape}
-      child]
-
-     [:& shape-strokes {:shape shape}
-      child]]))
+     [:& shape-fills {:shape shape} children]
+     [:& shape-strokes {:shape shape} children]]))
diff --git a/frontend/src/app/main/ui/shapes/fills.cljs b/frontend/src/app/main/ui/shapes/fills.cljs
index ae3bef8a8..df285209e 100644
--- a/frontend/src/app/main/ui/shapes/fills.cljs
+++ b/frontend/src/app/main/ui/shapes/fills.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.fills
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.config :as cfg]
    [app.main.ui.shapes.attrs :as attrs]
@@ -55,10 +56,11 @@
                             (obj/set! "patternTransform" transform))]
 
         (for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
-          [:*
+          [:* {:key (dm/str shape-index)}
            (for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
              (when (some? (:fill-color-gradient value))
-               (let [props #js {:id (str "fill-color-gradient_" render-id "_" fill-index)
+               (let [props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index)
+                                :key (dm/str fill-index)
                                 :gradient (:fill-color-gradient value)
                                 :shape shape}]
                  (case (d/name (:type (:fill-color-gradient value)))
@@ -66,12 +68,13 @@
                    "radial" [:> grad/radial-gradient props]))))
 
 
-           (let [fill-id (str "fill-" shape-index "-" render-id)]
+           (let [fill-id (dm/str "fill-" shape-index "-" render-id)]
              [:> :pattern (-> (obj/clone pattern-attrs)
                               (obj/set! "id" fill-id))
               [:g
                (for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
                  [:> :rect (-> (attrs/extract-fill-attrs value render-id fill-index)
+                               (obj/set! "key" (dm/str fill-index))
                                (obj/set! "width" width)
                                (obj/set! "height" height))])
 
diff --git a/frontend/src/app/main/ui/shapes/text/svg_text.cljs b/frontend/src/app/main/ui/shapes/text/svg_text.cljs
index c711caf2d..7ebf91630 100644
--- a/frontend/src/app/main/ui/shapes/text/svg_text.cljs
+++ b/frontend/src/app/main/ui/shapes/text/svg_text.cljs
@@ -45,6 +45,7 @@
         (for [[index data] (d/enumerate position-data)]
           (when (some? (:fill-color-gradient data))
             [:& grad/gradient {:id (str "fill-color-gradient_" (get-gradient-id index))
+                               :key index
                                :attr :fill-color-gradient
                                :shape data}]))])
 
@@ -71,5 +72,5 @@
                                         (obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))})
               shape (assoc shape :fills (:fills data))]
 
-          [:& shape-custom-strokes {:shape shape}
+          [:& shape-custom-strokes {:shape shape :key index}
            [:> :text props (:text data)]]))]]))
diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs
index 7a7f2fa92..0c113cb3d 100644
--- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs
@@ -72,8 +72,8 @@
              #(rx/dispose! sem)))))
 
       (if (and render? (= shape (mf/ref-val prev-shape-ref)))
-        (mf/create-element component props)
-        (mf/create-element frame-placeholder props)))))
+        (mf/jsx component props mf/undefined)
+        (mf/jsx frame-placeholder props mf/undefined)))))
 
 ;; Draw the frame proper as a deferred component
 (defn deferred-frame-shape-factory
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index 3633b1674..dd20e2dd9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.layers
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.data.workspace :as dw]
@@ -304,7 +305,7 @@
   {::mf/wrap-props false
    ::mf/wrap [mf/memo #(mf/throttle % 200)]}
   [props]
-  (let [search (obj/get props "search")
+  (let [search  (obj/get props "search")
         filters (obj/get props "filters")
         filters (if (some #{:shape} filters)
                   (conj filters :rect :circle :path :bool)
@@ -463,7 +464,7 @@
           [:span {:on-click toggle-search} i/search]]))
 
      [:div.tool-window-content {:on-scroll on-scroll}
-      [:& layers-tree-wrapper {:key (:id page)
-                               :objects objects
+      [:& layers-tree-wrapper {:objects objects
+                               :key (dm/str (:id page))
                                :search (:search-text @filter-state)
                                :filters (keys (:active-filters @filter-state))}]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
index 8741f3dce..e013ea955 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
@@ -144,6 +144,7 @@
                                     :id (:fill-color-ref-id value)
                                     :file-id (:fill-color-ref-file value)
                                     :gradient (:fill-color-gradient value)}
+                            :key index
                             :index index
                             :title (tr "workspace.options.fill")
                             :on-change (on-change index)
diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
index e6440786e..20e0eea6d 100644
--- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
@@ -8,6 +8,7 @@
   (:require
    [app.common.colors :as colors]
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
    [app.main.ui.formats :as fmt]
@@ -117,20 +118,17 @@
         step (calculate-step-size zoom)
         clip-id (str "clip-rule-" (d/name axis))]
 
-    
     [:*
      (let [{:keys [x y width height]} (get-background-area vbox zoom axis)]
        [:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
 
-     [:g.rules {:clipPath (str "url(#" clip-id ")")} 
+     [:g.rules {:clipPath (str "url(#" clip-id ")")}
 
       [:defs
        [:clipPath {:id clip-id}
         (let [{:keys [x y width height]} (get-clip-area vbox zoom axis)]
           [:rect {:x x :y y :width width :height height}])]]
 
-      
-
       (let [{:keys [start end]} (get-rule-params vbox axis)
             minv (max start -100000)
             minv (* (mth/ceil (/ minv step)) step)
@@ -140,9 +138,8 @@
         (for [step-val (range minv (inc maxv) step)]
           (let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
                 (get-rule-axis step-val vbox zoom axis)]
-            [:* 
-             [:text {:key (str "text-" (d/name axis) "-" step-val)
-                     :x text-x
+            [:* {:key (dm/str "text-" (d/name axis) "-" step-val)}
+             [:text {:x text-x
                      :y text-y
                      :text-anchor "middle"
                      :dominant-baseline "middle"
@@ -177,7 +174,7 @@
             :height (/ rule-area-size zoom)
             :style {:fill rules-background
                     :fill-opacity over-number-opacity}}]
-    
+
     [:text {:x (- (:x1 selection-rect) (/ 4 zoom))
             :y (+ (:y vbox) (/ 12 zoom))
             :text-anchor "end"
@@ -205,7 +202,7 @@
 
    (let [center-x (+ (:x vbox) (/ rule-area-half-size zoom))
          center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (/ rule-area-half-size zoom))]
-     
+
      [:g {:transform (str "rotate(-90 " center-x "," center-y ")")}
       [:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom))
               :y (- center-y (/ rule-area-half-size zoom))
@@ -227,7 +224,7 @@
               :height (/ rule-area-size zoom)
               :style {:fill rules-background
                       :fill-opacity over-number-opacity}}]
-      
+
       [:text {:x (- center-x (/ (:height selection-rect) 2) (/ 15 zoom))
               :y center-y
               :text-anchor "end"