reagent 2023-06-22 | Slack Archive

braai engineer10:06:02

Having a hard time porting this DrawControl React component to Reagent: https://github.com/visgl/react-map-gl/blob/master/examples/draw-polygon/src/draw-control.ts This is part of this react-map-gl library: https://github.com/visgl/react-map-gl/blob/master/examples/draw-polygon/src/app.tsx I got the Map component working but am struggling with the DrawControl component which uses useControl (looks like a hook?) and useCallback: https://github.com/visgl/react-map-gl/blob/master/examples/draw-polygon/src/draw-control.ts Here is what I have so far: https://gist.github.com/theronic/5da57a8c41a8904dab61e33beccec459 If I comment out [:> draw-control ...] the Map works, otherwise I get this hook-related error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

This does not seem related to Electric, but to Reagent & React Hooks. Alternatively, if someone knows how to get at the map instance directly (MapBox is imperative), I can add my own handlers there.

p-himik10:06:28

If you search for that error text in this channel, you'll see multiple answers pointing to the same link in the Reagent docs on how to use hooks with Reagent.

braai engineer11:06:07

@U2FRKM4TW I can get past the hook error by adding an intermediate component called as a functional component via [:f> intermediate] which in turn calls React/useCallback, but it still complains:

Uncaught TypeError: onCreate is not a function
    at eval (use-control.js:8:58)
    at mountMemo (react-dom.development.js:17226:19)
    at Object.useMemo (react-dom.development.js:17671:16)
    at exports.useMemo (react.development.js:1651:21)
    at exports.default (use-control.js:8:16)
    at Function.olarm$map$draw_control (map.cljc:45:9)
    at Function.eval [as cljs$core$IFn$_invoke$arity$3] (core.cljs:3941:15)
    at Function.eval [as cljs$core$IFn$_invoke$arity$2] (core.cljs:3936:7)
    at Function.eval [as cljs$core$IFn$_invoke$arity$2] (core.cljs:3971:7)
    at Object.reagent$impl$component$functional_wrap_render [as functional_wrap_render] (component.cljs:381:14)

I am not using useMemo so I assume the underlying component is. I can tap into map move events via useCallback so I know I'm using it correctly, but draw-control is still an issue. I suspect this is related to (MapboxDraw. props) but I'm not sure what props is supposed to be – I am just passing through the functional component arguments (props). I'm afraid I can't spend any more time debugging o this right now. Any guidance would be appreciated :)

p-himik11:06:09

I you create a proper minimal reproducible example, I can take a look.

Mateusz Mazurczak14:06:01

Hi, is there a way to get value out of functional components in let binding? Context: So the situation is that I have a hook value (react/useContext stuff) which value I returned from a function as [:f> value] And this works great when I include it into rendered html. But now I need to get that value in the let binding. Is there an option to do it without putting the whole component in :f> and calling useContext inside? I imagine something like this:

(defn foo [] (let [value (react/useContext stuff) ] [:f> value]))

(defn boo [] 
 (let [x (fake-fn-rendering-this (foo))] 
  [:div x]))

Andrew Bowden18:06:14

Hello everyone, I have recently updated my reagent from v1.1.0 to v1.2.0 and not it appears that the function reagent-dom is deprecated. Is there a replacement for this or am I just suppose to ignore the warnings?

p-himik19:06:03

What do you mean by reagent-dom?

Andrew Bowden19:06:26

i meant this function: (defn dom-node "Returns the root DOM node of a mounted component." {:deprecated "1.2.0"} [this] (react-dom/findDOMNode this))

p-himik20:06:45

You should replace it with React refs.

Andrew Bowden21:06:14

I'm fairly new to react interop, can you explain a little bit more?

hifumi12323:06:28

Refs let you expose mutable things, like DOM nodes.

(defn ref-demo []
  (let [ref (r/atom nil)]
    (fn []
      [:div
       [:input {:ref #(reset! ref %)}]
       [:button {:on-click #(.focus @ref)} "Click to focus"]])))

hifumi12323:06:02

React recently deprecated findDOMNode function, because ref is more general and lacks the downsides of findDOMNode. With refs, you can explicitly refer to the DOM node of a component in your hiccup rather than calling findDOMNode and hoping that the DOM node you get out of a component is the one you wanted.

2023-06-22

Channels