This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-11-18
Channels
- # announcements (2)
- # babashka (65)
- # beginners (104)
- # boot (8)
- # calva (23)
- # circleci (3)
- # clj-commons (1)
- # clj-on-windows (3)
- # clojure (43)
- # clojure-europe (45)
- # clojure-france (2)
- # clojure-italy (3)
- # clojure-nl (3)
- # clojure-norway (13)
- # clojure-uk (4)
- # clojurescript (5)
- # core-typed (2)
- # cursive (5)
- # data-science (2)
- # datalevin (10)
- # emacs (38)
- # events (2)
- # fulcro (11)
- # graphql (6)
- # gratitude (2)
- # helix (11)
- # hugsql (3)
- # jobs (2)
- # lsp (17)
- # luminus (1)
- # malli (15)
- # missionary (3)
- # nrepl (6)
- # off-topic (6)
- # pedestal (2)
- # portal (16)
- # reagent (33)
- # reitit (4)
- # releases (12)
- # ring (2)
- # sci (3)
- # shadow-cljs (21)
- # spacemacs (7)
- # sql (5)
- # tools-build (36)
- # web-security (2)
Just a question - does reagent makes some kind of optimization by itself? I was trying to use pure react to make some elements, but found almost no difference in performance
Hello. newbie here testing reagent, and I have trouble getting build working. I created new project with lein new reagent reagent-test
, run yarn
, and then lein figwheel
. Opened localhost:3449, and it shows “please wait while Figwheel/shadow-cljs is waking up ...“. In the console there are errors like:
Uncaught TypeError: Cannot read properties of undefined (reading ‘render’)
at reagent$dom$render_comp (dom.cljs?rel=1637224001428:18)
Any clues what I’m missing here?
One of the reasons why templates can be worse than just creating a project from scratch by hand.
When I ran the same commands, I got Error: Cannot find module '@cljs-oss/module-deps'
during the first build. After running yarn add @cljs-oss/module-deps
, I started getting Uncaught ReferenceError: $jscomp is not defined
in JS console. IIRC this error usually indicates either a but in the build tool or some incompatibility between the built tool and some NPM module.
You can try updating all the dependencies, especially Figwheel-related. If that doesn't work, might be worth asking in #figwheel
As an alternative, you can try using shadow-cljs - a completely different build tool.
Regarding the error on the missing library - seems like it's been fixed: https://github.com/bhauman/figwheel-main/issues/21 So maybe just updating the dependencies will fix that one as well.
ok, thx! just wanted to do “quick” testing but usually it does not work like that.. maybe invest bit more time and go the build-from-scratch route.
Also, can I recommend Shadow-CLJS? Figwheel got me into so many problems like this one that I tend to avoid it everywhere I can 🙂
yes! read the documentation (which was surprisingly thorough, no tldr) and it seems very promising.
Hi friends, having a hard time using React components written in javascript that use hooks with reagent, does anybody know the conversion sigils for this?
@U2FRKM4TW think I'm missing something then, trying to do [:div [:> Foo]]
where Foo is native and uses hooks but nothing i've tried or seen in the reagent docs seems to avoid the Invalid hook call
errors
note, we're not trying to write a reagent component that uses hooks, that is documented
React component that uses hooks is just a React component - there's nothing special about it.
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See
our simple test component is
const StripeTest = (props) => {
const [count, setCount] = useState(0)
return (
<>
<div>Nothing interesting: {count}</div>
<button onClick={() => setCount(count + 1)}>+</button>
</>
)
}
Ah, so you're the one writing that component, alright. How exactly did you confirm that it's not multiple versions of React?
idiom question: i have a global app-state
r/atom, and in a component i have r/with-let
to make cursors onto various keys of app-state
. should I be binding every part of app-state
that I’ll need in that component or sub component at the top level or should I just bind some of them and deref for others?
Not exactly certain what the last part of your question means, but in general you should get your data as close to the place that needs that data. Otherwise, there will be unnecessary rendering. E.g. suppose you have a table where you get the data for all the cells at the table level and then feed that data to individual cells. In this case, if just one cell receives new data, the whole table will be re-rendered. But if you deref only in cells or create cursors and deref only in cells, then the whole table won't be re-rendered when just a single cell changes.
let me see if i’m getting this right. creation of a cursor within a component doesn’t affect rendering. writing (:example @app-state)
will rerender the component when app-state
changes, but (let [example (r/cursor app-state [:example])] @example)
will rerender only when :example
inside of app-state
has changed?
cool, thank you
Although don't create a cursor and deref it right then and there. The cursor should be in a with-let
or in a form-2/form-3 component.
is there any reason to pass in a cursor to a component vs making the component form-2 and re-binding the cursor within?
(defn component-2 []
(r/with-let [example (r/cursor app-state [:example])]
[:div
[:p (str "Example 2: " @example)]]))
(defn component-1 []
(r/with-let [example (r/cursor app-state [:example])]
[:div
[:p (str "Example 1: " @example)]
[component-2]]))
vs
(defn component-2 [example]
[:div
[:p (str "Example 2: " @example)]])
(defn component-1 []
(r/with-let [example (r/cursor app-state [:example])]
[:div
[:p (str "Example 1: " @example)]
[component-2 example]]))
contrived example i know, but how a lot of my current codebase looks lol