This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-02-18
Channels
- # announcements (43)
- # aws (28)
- # babashka (32)
- # beginners (80)
- # calva (13)
- # chlorine-clover (2)
- # cider (11)
- # clj-kondo (15)
- # cljs-dev (1)
- # clojure (151)
- # clojure-dev (11)
- # clojure-europe (11)
- # clojure-italy (3)
- # clojure-losangeles (3)
- # clojure-nl (4)
- # clojure-spec (20)
- # clojure-uk (58)
- # clojured (3)
- # clojuredesign-podcast (2)
- # clojurescript (37)
- # core-async (4)
- # core-typed (1)
- # cursive (53)
- # datascript (5)
- # datomic (26)
- # duct (23)
- # emacs (3)
- # fulcro (22)
- # graalvm (1)
- # jobs (2)
- # joker (11)
- # juxt (24)
- # lumo (1)
- # mid-cities-meetup (2)
- # nyc (1)
- # off-topic (54)
- # parinfer (1)
- # reagent (13)
- # shadow-cljs (16)
- # sql (9)
- # tree-sitter (9)
- # vim (9)
I’m trying to use React Hooks in a react native app based on reagent/re-frame but I get the following error:
2020-02-18 10:29:17.953 6617-6652/com.origami E/ReactNativeJS: Invariant Violation: 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 for tips about how to debug and fix this problem.
Here is the code snippet:
(ns
(:require
["react-native" :as react-native]
[react :as react]
...))
(defn root []
(let [useState (.useState react 0)]
[:view
...
]))
Maybe it is a version mismatch as stated in the error but I think I’ve set up dependencies correctly. Is it the wrong place to use the hook? I’m using shadow-cljs
so some deps are loaded via deps.edn
like reagent {:mvn/version "0.9.1"}
which pulls in react 16.9.0
via CLJSJS and then I have my package.json
for the react-native app which references "react": "16.9.0"
… so I guess I should be fine, since it is the same version of react?@defa Hooks aren't currently usable withing Reagent components https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks (related: https://github.com/reagent-project/reagent/pull/477)
Solution for now, is to just use RAtom to store state, if you don't specifically need hooks for interop.
I’m using react-navigation and was looking for clean and easy way to navigate using re-frame events. Therefore I tried using the useNavigate
hook (https://reactnavigation.org/docs/en/use-navigation.html), so r/atoms will not help I guess.
ReactFeatures doc mentions the same workaround as ReactNavigation doc, wrapping the class component inside functional component which uses the hook.
Seems that I have overlooked that in the docs, will try to make it work. Thanks, @juhoteperi! UPDATE: works for the useState
hook in the example. Again, thanks, @juhoteperi!
I would like to understand why some react cljs libs use a macro rather than function to create react components and why don’t. It seems that reagent doesn’t use a macro for this while hicada https://github.com/rauhs/hicada and helix https://github.com/Lokeh/helix/blob/master/docs/creating-elements.md#-macro do. Is it for performances reasons (like converting props from clj to js) or is there another reason?
Yes, macros can be more performant but the implementation is more complex and user needs to call the macro so it makes to code more verbose
My question is: why hicada and helix use macros?
For helix, this is answered in the FAQ Tl;dr is that using React's local state feels the performance problems of dynamic hiccup parsing more than Reagent does
Because React local state always renders the entire element tree where the state is shared. Reagent can be more selective of what components rerender based on state changes
Hicada is just a way to do hiccup that has less performance impact, but with some expressivity tradeoffs. I don't think it's more nuanced than that
Thanks a lot @U4YGF4NGM