Clojurians Log v2
reagent
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}))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.
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.
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.
I really like reagent's model based on atoms.
I don't know uix 2 so I will have to give it a look.
Yes - React refs.
I tried adding a :ref field to that map (inside the with-meta call) but it didn't seem to work.
But I guess you may mean just doing that manually on each component instead of having a composable wrapper that arranges focus ?
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.
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.
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.
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).
Ah yes, but what I meant was that I do this:
Ah, sorry, you're right.
I can totally replace the case I was doing with that.
Thanks!
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.
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