roman01la / cljs-react-devtools

React DevTools for ClojureScript wrappers
https://roman01la.github.io/cljs-react-devtools/
Eclipse Public License 2.0
30 stars 1 forks source link

cljs-react-devtools turns page unresponsive if there's a `use-effect` hook in the component #6

Open ovistoica opened 1 month ago

ovistoica commented 1 month ago

Works for other components, but if there's a use-effect, the page becomes unresponsive.

Here's the component that triggers freeze in the video below:

(defui theme-provider
  [{:keys [children]}]
  (let [theme (state/use-subscription :theme)
        htmlRef (uix/use-memo (fn [] (js/document.querySelector "html")) [])
        dark? (= theme :dark)]
    (uix/use-effect
     (fn []
       (when htmlRef
         (if dark?
           (do
             (. (.-classList htmlRef) add "dark")
             (. (js/document.querySelector "html") setAttribute "data-theme" "dark"))
           (do
             (. (.-classList htmlRef) remove "dark")
             (. (js/document.querySelector "html") setAttribute "data-theme" "light")))))
     [htmlRef dark?])
    children))

Usage and instantiation of cljs-react-devtools

(defui main []
  ($ state/app-state-provider
    ($ router/router-provider
      ($ theme-provider
        ($ app)))))

(defonce root
  (dom/create-root (js/document.getElementById "root")))

(defn render []
  (dom/render-root ($ main) root))

(defn ^:export init []
  (render))

(when goog.DEBUG
  (cljs-react-devtools/init!
   {:root (js/document.getElementById "root")
    :shortcut "Control-Shift-Meta-R"}))

https://github.com/roman01la/cljs-react-devtools/assets/16940343/184c764d-0f88-4320-81c8-3d2395f3b323

roman01la commented 1 month ago

I'll need either a full source code or a very minimal repro to debug this problem

ovistoica commented 1 month ago

Thanks for replying. So you couldn't replicate this. Interesting. Yeah, I'll look into it and see if I can provide a minimum replication