Fork me on GitHub

you can use hooks, but you might not be able to use other react features in the future that build on hooks unless you go all in


i.e. not use ratoms or re-frame subscriptions in the way that they currently are


you could have a use-ratom or use-subscription hook tho


What did I do wrong? I am building with shadowcljs. The code is as below:

(ns app.ui.component
   [reagent.core :as r]
   ["react-icons" :as icon]))

;; see 
(def icon-context-provider (r/adapt-react-class icon/IconContext.Provider))

  ;; error happens. Ranger error, Maximum call stack size exceeded.
  (r/as-element [icon-context-provider]))
I also posted at:


What's the stacktrace? Always post stacktraces when trying to get help with an exception of any kind.


Say I execute the

(r/as-element [icon-context-provider])
In the repl, I got:
; The result object failed to print. It is available via *1 if you want to interact with it.
; The exception was: 
; RangeError: Maximum call stack size exceeded



The result object failed to print
That's the error. The code works fine. It's just that your REPL can't print it.


Also, that's not a stacktrace. Usually, when you encounter an exception in a REPL, evaluating *e will give you the full exception. Not sure about this particular case though, since the error is coming not from your code but from within the REPL itself.


Understood. But the underlying error is when the repl tries to printing it, it suffers RangeError: Maximum call stack size exceeded.


And why is that important? Just don't print the value.


I have another more complicated example that does not invovling printing, but has the RangeError: Maximum call stack size exceeded issue.


Let me make that example.


Problem got solved. But the reason is still a bit curious to me. The offending code is

(defn- panes
   (for [{:keys [icon color label] :as item} sidebar-items]
     ^{:key label} 
     [sidebar-item item])])
If I remove the `^{:key label}` 
I will see
[41447:0627/220619.804217:INFO:CONSOLE(33569)] "Uncaught RangeError: Maximum call stack size exceeded", source: js/cljs-runtime/cljs.core.js (33569)
[41447:0627/220619.806073:INFO:CONSOLE(333)] "The above error occurred in the <app.view.panes> component:

    at app.view.panes (js/cljs-runtime/reagent.impl.component.js:499:43)
    at div
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$Box$Box.js:2:296)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$HorizontalSection$Section$Section.js:2:267)
    at nav
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$Box$Box.js:2:296)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$HorizontalSection$HorizontalSection.js:4:280)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$Navbar$Navbar.js:2:495)
    at div
    at div
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$Box$Box.js:2:296)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$AppShell.js:3:69)
    at MantineProvider (js/cljs-runtime/module$node_modules$$mantine$styles$cjs$theme$MantineProvider.js:1:144)
    at G__28235 (js/cljs-runtime/reagent.impl.component.js:499:43)
    at app (js/cljs-runtime/reagent.impl.component.js:499:43)

Consider adding an error boundary to your tree to customize error handling behavior.


When you remove :key, Reagent (or React maybe, don't recall) will try to print the offending component. Yeah, it's problematic. If you can create a minimal reproducible example, it's worth an issue in the Reagent's repo. I bet the original error should actually be just a warning about a missing key. Usually it works fine, but seems like your case is for some reason breaks the printing.


I see. It still boils down to the printing of the offending element.


Yes, indeed. Initially, I didn't realize that there are reasons for why one would actually want to print something like it.


Back to the original example

(r/as-element [icon-context-provider])
Do you have any clue, or how do I track where the infinite recursion happens?


You can open the DevTools in your browser where the resulting JS code is evaluated and enable it to break on all exceptions.