roman01la/uix

Trick for hot-reloading components

alexisvincent opened this issue · 3 comments

Since UIX switched to React.memo wrapping the components, hot reloading of components where props are the same stopped working. Here's a trick for getting that back in development. Didn't know where to leave this so an issue it is :)

(when ^boolean js/goog.DEBUG
  (set! react/memo (fn [& [f]] f)))

I don't think this is true (not verified). When changed ns is evaluated all functions are redeclared, and when React encounters a new component it'll re-mount it. I think having Figwheel ^:after-load hook that re-renders UI from the root is going to trigger this in React. This is a common practice in ClojureScript.

(ns ^:figwheel-hooks my.ns)

(defn ^:after-load render []
  (uix.dom/render [app] js/root))

For what it's worth I ended up needing the originally mentioned trick when rendering components through multiple namespaces... Eg:

;; a.cljs
(ns a
  (:require [b]))

(defn app []
  [b/render])

(defn render []
  (uix.dom/render [app] (js/document.getElementById "app")))

;; b.cljs

(ns b
  (:require [c]))

(defn render []
  [c/render])

;; c.cljs

(ns c)

(defn render []
  [:p "Hello world"])

I needed the trick to get the application to re-render when c/render was modified.