Fork me on GitHub

I got a hotloading issue. I am on react native, but that should not matter much as regard to react on web. The problem is, the main screen is A. Starting from A, I navigated to B, and then C. Now I edit the code related to C. Shadowcljs happily reloaded the code of C. But how do I re-render C and show it? Currently I added a dev/after-load on the starting-screen A, which is the entry point. But that makes the screen to show A instead of C everytime I change code.


that it entirely out of the control of shadow-cljs. it just calls a function. what that renders is up to you.


I take my words back. seems adding the ^dev/after-load at register-component indeed calls that function, but some other mechanism is needed to trick RN to rerender all the app

(defn register-component {:dev/after-load true}
  (.registerComponent ^js (.-AppRegistry rn)
                      ;; wrap in :>f to make a functional component
                      #(r/reactify-component (constantly [:f> app]))))


your version does not work propery with hot-reload


I created the render-root helper for this purpose


Yup. I was searching for the forceUpdate method, but seems the result from r/reactify-component does not contain such field.


you are free to copy this but all the steps it does are necessary. so be careful if you try to build your own.


its not just .forceUpdate


Now I doubt this works. The method only updates the root component, but cannot recursively updating child components.


Just tested. Only the root component is foreced to be updated.


then one of your components decides to skip rendering. see the gotchas described here