reagent 2023-03-22 | Slack Archive

Is there way to do something like this without using the now-deprecated dom-node call?

(defn set-focus
  [this]
  (.focus (d/dom-node this)))

(def focus-wrapper
  "Pass-through component which ensures its argument receives focus when mounted."
  (with-meta identity
    {:component-did-mount set-focus}))

p-himik15:03:11

Yes - React refs.

pmooser15:03:05

I tried adding a :ref field to that map (inside the with-meta call) but it didn't seem to work.

pmooser15:03:22

But I guess you may mean just doing that manually on each component instead of having a composable wrapper that arranges focus ?

pmooser15:03:59

The thing is, this wrapper works with random bits of hiccup if you want - which I don't I think I can just add a ref field to ? Or maybe I can, I dunno.

p-himik15:03:01

Yeah, AFAIK you can't have such a wrapper in React without using that deprecated call that will eventually be (or maybe already is in 18) removed.

pmooser15:03:13

Ok, thank you for the help - I am sure I probably don't fundamentally need this, but it's funny when something gets deprecated that no one quite knows how to replace directly.

p-himik15:03:23

Also if you know in advance which components will use that wrapper, it can be replaced with just one line passed to a node's attribute map: :ref #(some-> ^js % .focus).

pmooser15:03:46

Ah yes, but what I meant was that I do this:

pmooser15:03:36

Ah, sorry, you're right.

pmooser15:03:43

I can totally replace the case I was doing with that.

pmooser15:03:44

Thanks!

👍 2

juhoteperi15:03:26

Class components never properly solved how to create reusable "mixins"/utilities. Your wrapper doesn't e.g. work if multiple wrappers define component-did-mount. React Hooks solve this, though the way to use them is a bit different.

juhoteperi15:03:37

Focusing input is so simple you can do that with ref fn directly, but you can check e.g. https://github.com/streamich/react-use for examples of reusable util hooks

pmooser09:03:49

I like the concept of hooks, but reagent still has some subtle problems using hooks, as far as I can tell. Once we start using hooks, you can start to get periodic (spurious, as far as I can tell) errors about leaks and stuff like that in development mode during code reloading.

juhoteperi09:03:01

Helix and Uix 2 are good choices to build apps using Hooks. But I have several Reagent apps on production using some hooks without problems.

pmooser10:03:05

Yeah, the problem for me with something like helix is that my ideal clojurescript world isn't just moving parenthesis and writing javascript in clojure.

pmooser10:03:10

I really like reagent's model based on atoms.

pmooser10:03:22

I don't know uix 2 so I will have to give it a look.

2023-03-22

Channels