This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-12-18
Channels
- # adventofcode (20)
- # aleph (25)
- # announcements (4)
- # babashka (117)
- # beginners (150)
- # calva (4)
- # cider (9)
- # clj-on-windows (2)
- # clojure (9)
- # clojure-europe (4)
- # clojure-italy (3)
- # clojuredesign-podcast (18)
- # clojurescript (16)
- # conjure (1)
- # core-async (35)
- # cursive (13)
- # datalevin (6)
- # datomic (6)
- # fulcro (8)
- # hyperfiddle (5)
- # malli (8)
- # nextjournal (4)
- # off-topic (51)
- # pathom (4)
- # reagent (21)
- # sci (14)
- # shadow-cljs (22)
- # specter (3)
- # testing (22)
- # tools-deps (8)
- # xtdb (7)
Hi! React Dev Tools are complaining about me not having https://reactjs.org/docs/strict-mode.html turned on. How would I wrap my Reagent components in <React.StrictMode>
? What is the CLJS syntax?
my first thought is to look into interopt: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md
I think it might just be :> React/StrickMode
but i can't seem to confirm that idea.
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.
is the code open source? Im curious
to see what your trying (im lazy im hoping you already have toy example setup to try this) 🙂
thats perfect
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!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).
• StrictMode
currently helps with:
• https://reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles ~ better handled with react hooks
• https://reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage ~ i have never used this api (but maybe you might find a lib that does? )
• https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage ~ wat?
• https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects ~ double wat?
• https://reactjs.org/docs/strict-mode.html#detecting-legacy-context-api ~ im not using this
Yea, i can't say that looks useful to me. Seems more like something the react internal team built for themselves or something.
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? https://youtu.be/oPfSC5bQPR8?t=254 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.
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.
any one have coupon code for https://www.jacekschae.com/learn-re-frame-pro