Fork me on GitHub

Hi! React Dev Tools are complaining about me not having turned on. How would I wrap my Reagent components in <React.StrictMode>? What is the CLJS syntax?

Drew Verlee03:12:51

I think it might just be :> React/StrickMode but i can't seem to confirm that idea.

Drew Verlee03:12:05

assuming you have the react dependency and require react as React, you can then have the hiccup like [:> React/StrickMode] like any other div. Will it tell us useful stuff in cljs? Im guessing so.


I think I tried almost exactly that, but maybe I had the dependency wrong. I'll give it another try.

Drew Verlee03:12:43

is the code open source? Im curious

Drew Verlee03:12:08

to see what your trying (im lazy im hoping you already have toy example setup to try this) 🙂


Oh, it's so uninteresting, like hello world.

Drew Verlee04:12:15

thats perfect

Drew Verlee04:12:25

for isolating the issue at least


OK, yup, that was the problem: I didn't have dependencies right. Code is just:

(ns test
  (:require [reagent.dom :as rdom]
            ["react" :as React]))

(defn main-component []
  [:p "Hello, world"])

(defn ^:dev/after-load main []
  (rdom/render [:> React/StrictMode [main-component]]
               (.getElementById js/document "app")))
I'm using shadow-cljs so I needed to npm install react and then I had to look up the actual correct way to require it. (Or, if it's not correct, it at least works in this one tiny play case.) Thank you!

Drew Verlee04:12:47

i'm glad it helped. @UNVTP1W03 message me with what you find about react/strick class and the types of feedback it gives. maybe we turn the conversation & findings into a clojurescript blog post on reddit.


Yeah, if I find it makes any difference I'll let you know. I have the feeling it's not really going to matter to me, but I was curious how to at least stop the devtools from showing me angry red exclamation point on all my components (and, more importantly, how to interop with outside components).

Drew Verlee04:12:19

Yea, i can't say that looks useful to me. Seems more like something the react internal team built for themselves or something.

Drew Verlee03:12:09

Would the "tearing" reference in the react 2021 talk video (see link below), happen in reagent in cases where you rely on an a reagent atom because that's an external store? It's currently over myhead, but it would seem if there is an issue (or improvment) it might be possible with the useSyncExternalStore function he mentions.


yes, tearing can occur with reagent atoms


useSynxExternal store will help


Just in case, I want to mention that right now there's no problem with it at all simply because concurrent rendering is not enabled by default in React. When and if it becomes the default, I think it's likely that it will be handled correctly on Reagent side to avoid such issues.