diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs
index 9a588fc5c..12904f429 100644
--- a/frontend/src/uxbox/main/data/workspace.cljs
+++ b/frontend/src/uxbox/main/data/workspace.cljs
@@ -2,7 +2,7 @@
 ;; License, v. 2.0. If a copy of the MPL was not distributed with this
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
 ;;
-;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.data.workspace
   (:require
diff --git a/frontend/src/uxbox/main/ui/auth/login.cljs b/frontend/src/uxbox/main/ui/auth/login.cljs
index 3990593a4..3f4b67fc9 100644
--- a/frontend/src/uxbox/main/ui/auth/login.cljs
+++ b/frontend/src/uxbox/main/ui/auth/login.cljs
@@ -99,7 +99,7 @@
 
 (mf/defc login-page
   []
-  (mf/use-effect {:end #(st/emit! (fm/clear-form :login))})
+  (mf/use-effect (constantly #(st/emit! (fm/clear-form :login))))
   [:div.login
    [:div.login-body
     (messages-widget)
diff --git a/frontend/src/uxbox/main/ui/dashboard/colors.cljs b/frontend/src/uxbox/main/ui/dashboard/colors.cljs
index 8e1eba6bb..52c9ea673 100644
--- a/frontend/src/uxbox/main/ui/dashboard/colors.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/colors.cljs
@@ -38,7 +38,7 @@
 
 (mf/defc color-modal
   [{:keys [on-submit value] :as props}]
-  (let [local (mf/use-ref value)]
+  (let [local (mf/use-var value)]
     [:div.lightbox-body
      [:h3 (tr "ds.color-lightbox.title")]
      [:form
@@ -282,8 +282,8 @@
                         (first colls))
         id (:id selected-coll)]
 
-    (mf/use-effect {:init #(st/emit! (dc/initialize)) :deps #js [id type]})
-    (mf/use-effect {:init #(st/emit! (dc/fetch-collections))})
+    (mf/use-effect #(st/emit! (dc/initialize)) #js [id type])
+    (mf/use-effect #(st/emit! (dc/fetch-collections)))
 
     [:section.dashboard-content
      [:& nav {:type type
diff --git a/frontend/src/uxbox/main/ui/dashboard/common.cljs b/frontend/src/uxbox/main/ui/dashboard/common.cljs
index 83d63fde6..954f8fc09 100644
--- a/frontend/src/uxbox/main/ui/dashboard/common.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/common.cljs
@@ -18,7 +18,7 @@
 (mf/defc grid-header
   [{:keys [on-change on-delete value read-only?] :as props}]
   (let [edit? (mf/use-state false)
-        input (mf/use-ref* nil)]
+        input (mf/use-ref nil)]
     (letfn [(save []
               (let [new-value (-> (mf/ref-node input)
                                   (dom/get-inner-text)
diff --git a/frontend/src/uxbox/main/ui/dashboard/icons.cljs b/frontend/src/uxbox/main/ui/dashboard/icons.cljs
index 0db699a5f..25b9a6103 100644
--- a/frontend/src/uxbox/main/ui/dashboard/icons.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/icons.cljs
@@ -96,7 +96,7 @@
         ;; TODO: recalculate the num-icons on crud operations for
         ;; avod doing this on UI.
         ;; num-icons-iref (mf/use-memo {:deps #js [id]
-        ;;                               :init #(make-num-icons-iref (:id coll))})
+        ;;                              :fn #(make-num-icons-iref (:id coll))})
         ;; num-icons (mf/deref num-icons-iref)
         editable? (= type :own)]
     (letfn [(on-click [event]
@@ -163,7 +163,7 @@
 
 (mf/defc grid-form
   [{:keys [id type uploading?] :as props}]
-  (let [input (mf/use-ref* nil)
+  (let [input (mf/use-ref nil)
         on-click #(dom/click (mf/ref-node input))
         on-select #(st/emit! (->> (dom/get-event-files %)
                                   (jscoll->vec)
@@ -331,7 +331,7 @@
 (mf/defc grid
   [{:keys [id type coll opts] :as props}]
   (let [editable? (or (= type :own) (nil? id))
-        icons-iref (mf/use-memo {:deps #js [id] :init #(make-icons-iref id)})
+        icons-iref (mf/use-memo #(make-icons-iref id) #js [id])
         icons (->> (mf/deref icons-iref)
                    (filter-icons-by (:filter opts ""))
                    (sort-icons-by (:order opts :name)))]
@@ -425,9 +425,9 @@
                         :else (first colls))
         id (:id selected-coll)]
 
-    (mf/use-effect {:init #(st/emit! (di/fetch-collections))})
-    (mf/use-effect {:init #(st/emit! (di/initialize)
-                                     (di/fetch-icons id))
+    (mf/use-effect #(st/emit! (di/fetch-collections)))
+    (mf/use-effect {:fn #(st/emit! (di/initialize)
+                                   (di/fetch-icons id))
                     :deps #js [id type]})
 
     [:section.dashboard-content
diff --git a/frontend/src/uxbox/main/ui/dashboard/images.cljs b/frontend/src/uxbox/main/ui/dashboard/images.cljs
index 6073b44d0..95cad1c2f 100644
--- a/frontend/src/uxbox/main/ui/dashboard/images.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/images.cljs
@@ -96,8 +96,7 @@
         {:keys [id type name num-images]} coll
         ;; TODO: recalculate the num-images on crud operations for
         ;; avod doing this on UI.
-        num-images-iref (mf/use-memo {:deps #js [id]
-                                      :init #(make-num-images-iref (:id coll))})
+        num-images-iref (mf/use-memo #(make-num-images-iref (:id coll)) #js [id])
         num-images (mf/deref num-images-iref)
         editable? (= type :own)]
     (letfn [(on-click [event]
@@ -286,7 +285,7 @@
 
 (mf/defc grid-form
   [{:keys [id type uploading?] :as props}]
-  (let [input (mf/use-ref* nil)
+  (let [input (mf/use-ref nil)
         on-click #(dom/click (mf/ref-node input))
         on-select #(st/emit! (->> (dom/get-event-files %)
                                   (jscoll->vec)
@@ -317,7 +316,7 @@
 (mf/defc grid
   [{:keys [id type coll opts] :as props}]
   (let [editable? (or (= type :own) (nil? id))
-        images-iref (mf/use-memo {:deps #js [id] :init #(make-images-iref id)})
+        images-iref (mf/use-memo #(make-images-iref id) #js [id])
         images (->> (mf/deref images-iref)
                     (filter-images-by (:filter opts ""))
                     (sort-images-by (:order opts :name)))]
@@ -403,9 +402,9 @@
                         :else (first colls))
         id (:id selected-coll)]
 
-    (mf/use-effect {:init #(st/emit! (di/fetch-collections))})
-    (mf/use-effect {:init #(st/emit! (di/initialize)
-                                     (di/fetch-images id))
+    (mf/use-effect #(st/emit! (di/fetch-collections)))
+    (mf/use-effect {:fn #(st/emit! (di/initialize)
+                                   (di/fetch-images id))
                     :deps #js [id type]})
 
     [:section.dashboard-content
diff --git a/frontend/src/uxbox/main/ui/dashboard/projects.cljs b/frontend/src/uxbox/main/ui/dashboard/projects.cljs
index d9ea84bfb..924bf4269 100644
--- a/frontend/src/uxbox/main/ui/dashboard/projects.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/projects.cljs
@@ -213,8 +213,7 @@
 
 (mf/defc projects-page
   [_]
-  (mf/use-effect
-   {:init #(st/emit! (udp/initialize))})
+  (mf/use-effect #(st/emit! (udp/initialize)))
   (let [opts (mf/deref opts-ref)]
     [:section.dashboard-content
      [:& menu {:opts opts}]
diff --git a/frontend/src/uxbox/main/ui/modal.cljs b/frontend/src/uxbox/main/ui/modal.cljs
index 5e8406b44..354c8eea5 100644
--- a/frontend/src/uxbox/main/ui/modal.cljs
+++ b/frontend/src/uxbox/main/ui/modal.cljs
@@ -36,10 +36,12 @@
 (mf/defc modal-wrapper
   [{:keys [component props]}]
   (mf/use-effect
-   {:init #(events/listen js/document EventType.KEYDOWN on-esc-clicked)
-    :end #(events/unlistenByKey %)})
+   (fn []
+     (let [key (events/listen js/document EventType.KEYDOWN on-esc-clicked)]
+       #(events/unlistenByKey %))))
+
   (let [classes (classnames :transparent (:transparent? props))
-        parent-ref (mf/use-ref* nil)]
+        parent-ref (mf/use-ref nil)]
     [:div.lightbox {:class classes
                     :ref parent-ref
                     :on-click #(on-parent-clicked % parent-ref)}
diff --git a/frontend/src/uxbox/main/ui/shapes.cljs b/frontend/src/uxbox/main/ui/shapes.cljs
index e2f28d7ab..8610a6b1f 100644
--- a/frontend/src/uxbox/main/ui/shapes.cljs
+++ b/frontend/src/uxbox/main/ui/shapes.cljs
@@ -31,8 +31,8 @@
   {:wrap [mf/wrap-memo]}
   [{:keys [id] :as props}]
   (let [shape-iref (mf/use-memo {:deps #js [id]
-                                 :init #(-> (l/in [:shapes id])
-                                            (l/derive st/state))})]
+                                 :fn #(-> (l/in [:shapes id])
+                                          (l/derive st/state))})]
     (when-let [shape (mf/deref shape-iref)]
       (when-not (:hidden shape)
         (render-shape shape)))))
diff --git a/frontend/src/uxbox/main/ui/shapes/image.cljs b/frontend/src/uxbox/main/ui/shapes/image.cljs
index fc34a3dc1..9e989e37d 100644
--- a/frontend/src/uxbox/main/ui/shapes/image.cljs
+++ b/frontend/src/uxbox/main/ui/shapes/image.cljs
@@ -36,8 +36,7 @@
         selected? (contains? selected (:id shape))
         on-mouse-down #(common/on-mouse-down % shape selected)]
 
-    (mf/use-effect
-     {:init #(st/emit! (udi/fetch-image (:image shape)))})
+    (mf/use-effect #(st/emit! (udi/fetch-image (:image shape))))
 
     (when image
       [:g.shape {:class (when selected? "selected")
diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs
index 0a2fd173f..d1e2d08d1 100644
--- a/frontend/src/uxbox/main/ui/workspace.cljs
+++ b/frontend/src/uxbox/main/ui/workspace.cljs
@@ -60,25 +60,19 @@
         (st/emit! (dw/increase-zoom)))
       (scroll/scroll-to-point dom mouse-point scroll-position))))
 
-(defn- subscibe
+(defn- subscribe
   [canvas page]
-  (let [canvas-dom (mf/ref-node canvas)]
-    ;; TODO: scroll stuff need to be refactored
-    (scroll/scroll-to-page-center canvas-dom page)
-    (st/emit! (udp/watch-page-changes (:id page))
-              (udu/watch-page-changes (:id page)))
-
-    (shortcuts/init)))
-
-(defn- unsubscribe
-  [shortcuts-subscription]
-  (st/emit! ::udp/stop-page-watcher)
-  (rx/cancel! shortcuts-subscription))
+  (scroll/scroll-to-page-center (mf/ref-node canvas) page)
+  (st/emit! (udp/watch-page-changes (:id page))
+            (udu/watch-page-changes (:id page)))
+  (let [sub (shortcuts/init)]
+    #(do (st/emit! ::udp/stop-page-watcher)
+         (rx/cancel! sub))))
 
 (mf/defc workspace
   [{:keys [page] :as props}]
   (let [flags  (or (mf/deref refs/flags) #{})
-        canvas (mf/use-ref* nil)
+        canvas (mf/use-ref nil)
 
         left-sidebar? (not (empty? (keep flags [:layers :sitemap
                                                 :document-history])))
@@ -89,9 +83,8 @@
                  :no-tool-bar-left (not left-sidebar?)
                  :scrolling (:viewport-positionig workspace))]
 
-    (mf/use-effect {:deps (:id page)
-                    :init #(subscibe canvas page)
-                    :end unsubscribe})
+    (mf/use-effect {:deps #js [canvas page]
+                    :fn #(subscribe canvas page)})
     [:*
      (messages-widget)
      [:& header {:page page
@@ -128,13 +121,13 @@
 (mf/defc workspace-page
   [{:keys [project-id page-id] :as props}]
   (let [page-iref (mf/use-memo {:deps #js [project-id page-id]
-                                :init #(-> (l/in [:pages page-id])
-                                           (l/derive st/state))})
+                                :fn #(-> (l/in [:pages page-id])
+                                         (l/derive st/state))})
         page (mf/deref page-iref)]
 
     (mf/use-effect
      {:deps #js [project-id page-id]
-      :init #(st/emit! (dw/initialize project-id page-id))})
+      :fn #(st/emit! (dw/initialize project-id page-id))})
 
     ;; (prn "workspace-page.render" (:id page) props)
 
diff --git a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs
index d309adab2..15dcb1d04 100644
--- a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs
@@ -61,8 +61,8 @@
         invisible (- (count (:colors coll)) visible)
         close #(st/emit! (udw/toggle-flag :colorpalette))
 
-        container (mf/use-ref* nil)
-        container-child (mf/use-ref* nil)]
+        container (mf/use-ref nil)
+        container-child (mf/use-ref nil)]
 
     (letfn [(select-coll [event]
               (let [id (read-string (dom/event->value event))
@@ -86,7 +86,7 @@
                 (when (not= (:width @local) width)
                   (swap! local assoc :width width))))]
 
-      (mf/use-effect {:deps true :init after-render})
+      (mf/use-effect {:deps true :fn after-render})
 
       [:div.color-palette
        [:div.color-palette-actions
@@ -116,5 +116,5 @@
 (mf/defc colorpalette
   [props]
   (let [colls (mf/deref collections-iref)]
-    (mf/use-effect {:init #(st/emit! (udc/fetch-collections))})
+    (mf/use-effect #(st/emit! (udc/fetch-collections)))
     [:& palette {:colls (vals colls)}]))
diff --git a/frontend/src/uxbox/main/ui/workspace/grid.cljs b/frontend/src/uxbox/main/ui/workspace/grid.cljs
index 1678265e3..d1174f265 100644
--- a/frontend/src/uxbox/main/ui/workspace/grid.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/grid.cljs
@@ -37,6 +37,6 @@
   (let [metadata (:metadata page)
         color (:grid-color metadata "#cccccc")
         path (mf/use-memo {:deps #js [metadata]
-                           :init #(make-grid-path metadata)})]
+                           :fn #(make-grid-path metadata)})]
     [:g.grid {:style {:pointer-events "none"}}
      [:path {:d path :stroke color :opacity "0.3"}]]))
diff --git a/frontend/src/uxbox/main/ui/workspace/images.cljs b/frontend/src/uxbox/main/ui/workspace/images.cljs
index 0840f8fca..e9fcdfdef 100644
--- a/frontend/src/uxbox/main/ui/workspace/images.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/images.cljs
@@ -40,7 +40,7 @@
 
 (mf/defc import-image-modal
   [props]
-  (let [input (mf/use-ref* nil)
+  (let [input (mf/use-ref nil)
         uploading? (mf/deref uploading-iref)]
     (letfn [(on-upload-click [event]
               (let [input-el (mf/ref-node input)]
@@ -134,12 +134,12 @@
                        (swap! local assoc :id))]
 
     (mf/use-effect
-     {:init #(do (st/emit! (udi/fetch-collections))
-                 (st/emit! (udi/fetch-images nil)))})
+     {:fn #(do (st/emit! (udi/fetch-collections))
+               (st/emit! (udi/fetch-images nil)))})
 
     (mf/use-effect
      {:deps #js [type id]
-      :init #(st/emit! (udi/fetch-images id))})
+      :fn #(st/emit! (udi/fetch-images id))})
 
     [:div.lightbox-body.big-lightbox
      [:h3 "Import image from library"]
diff --git a/frontend/src/uxbox/main/ui/workspace/ruler.cljs b/frontend/src/uxbox/main/ui/workspace/ruler.cljs
index c376f88fc..94518e58c 100644
--- a/frontend/src/uxbox/main/ui/workspace/ruler.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/ruler.cljs
@@ -65,7 +65,7 @@
           (on-unmount []
             (st/emit! :interrupt
                       (udw/clear-ruler)))]
-    (mf/use-effect {:end on-unmount})
+    (mf/use-effect (constantly on-unmount))
     [:svg {:on-mouse-down on-mouse-down
            :on-mouse-up on-mouse-up}
      [:rect {:style {:fill "transparent"
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
index 6ab8a9198..cd19ec4a4 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
@@ -90,9 +90,9 @@
 
 (mf/defc shape-options
   [{:keys [sid] :as props}]
-  (let [shape-iref (mf/use-memo {:deps sid
-                                 :init #(-> (l/in [:shapes sid])
-                                            (l/derive st/state))})
+  (let [shape-iref (mf/use-memo {:deps #js [sid]
+                                 :fn #(-> (l/in [:shapes sid])
+                                          (l/derive st/state))})
         shape (mf/deref shape-iref)
         menus (get +menus-map+ (:type shape))]
     [:div
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
index 6e84b0b73..a86b7f553 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
@@ -98,8 +98,8 @@
 (mf/defc sitemap-toolbox
   [{:keys [project-id current-page-id] :as props}]
   (let [project-iref (mf/use-memo {:deps #js [project-id]
-                                   :init #(-> (l/in [:projects project-id])
-                                              (l/derive st/state))})
+                                   :fn #(-> (l/in [:projects project-id])
+                                            (l/derive st/state))})
         project (mf/deref project-iref)
         create #(udl/open! :page-form {:page {:project project-id}})
         close #(st/emit! (dw/toggle-flag :sitemap))]
diff --git a/frontend/src/uxbox/main/ui/workspace/sortable.cljs b/frontend/src/uxbox/main/ui/workspace/sortable.cljs
index 18acd19fb..a1bcd69a7 100644
--- a/frontend/src/uxbox/main/ui/workspace/sortable.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sortable.cljs
@@ -20,14 +20,14 @@
     :or {on-hover (constantly nil)
          on-drop (constantly nil)}
     :as options}]
-  (let [ref (mf/use-ref* nil)
+  (let [ref (mf/use-ref nil)
         [_, drop] (rdnd/useDrop
                    #js {:accept type
                         :hover (fn [item monitor]
-                                 (when (unchecked-get ref "current")
+                                 (when (mf/rev-val ref)
                                    (on-hover (unchecked-get item "data") monitor)))
                         :drop (fn [item monitor]
-                                (when (unchecked-get ref "current")
+                                (when (mf/ref-val ref)
                                   (on-drop (unchecked-get item "data") monitor)))})
         [props, drag] (rdnd/useDrag
                        #js {:item #js {:type type :data data}
diff --git a/frontend/src/uxbox/util/components.cljs b/frontend/src/uxbox/util/components.cljs
index 9adf51e32..f4bf8aa1a 100644
--- a/frontend/src/uxbox/util/components.cljs
+++ b/frontend/src/uxbox/util/components.cljs
@@ -28,21 +28,22 @@
             (let [chunk-size (if (> pending-num chunk-size) chunk-size pending-num)]
               {:current (into current (take chunk-size pending))
                :pending (drop chunk-size pending)
-               :pending-num (- pending-num chunk-size)}))]
+               :pending-num (- pending-num chunk-size)}))
+          (after-render [state]
+            (when (pos? (:pending-num @state))
+              (let [sem (schedule-on-idle (fn [] (swap! state update-state)))]
+                #(rx/cancel! sem))))]
 
-    (let [initial (mf/use-memo {:init initial-state})
+    (let [initial (mf/use-memo initial-state)
           state   (mf/use-state initial)]
-      (mf/use-effect {:deps true
-                      :init #(when (pos? (:pending-num @state))
-                               (schedule-on-idle (fn [] (swap! state update-state))))
-                      :end #(when % (rx/cancel! %))})
+      (mf/use-effect {:deps true :fn #(after-render state)})
       (for [item (:current @state)]
         (children item)))))
 
 (defn use-rxsub
   [ob]
-  (let [[state reset-state!] (mf/use-state* @ob)]
-    (mf/use-effect*
+  (let [[state reset-state!] (mf/useState @ob)]
+    (mf/useEffect
      (fn []
        (let [sub (rx/subscribe ob #(reset-state! %))]
          #(rx/cancel! sub)))
diff --git a/frontend/src/uxbox/view/ui/viewer.cljs b/frontend/src/uxbox/view/ui/viewer.cljs
index 518f5933d..76704a645 100644
--- a/frontend/src/uxbox/view/ui/viewer.cljs
+++ b/frontend/src/uxbox/view/ui/viewer.cljs
@@ -38,7 +38,7 @@
   [{:keys [token id]}]
   (let [{:keys [project pages flags]} (mf/react state-ref)]
     (mf/use-effect
-     {:init #(st/emit! (dv/initialize token))})
+     {:fn #(st/emit! (dv/initialize token))})
     (when (seq pages)
       [:section.view-content
        (when (contains? flags :sitemap)