A minimalistic ClojureScript interface to React.js
simongray 2021-04-27T07:32:08.199Z

@qmstuart If you have a stateful component it needs to be either form-2 or form-3. with-let just allows you to make a form-2 component while skipping the inner render function, saving you a few characters and a level of indentation. I recommend reading this:

p-himik 2021-04-27T10:02:36.199400Z

with-let works like a form-2 component in most of the cases, but it's not entirely like it. It's a form-1 component with cache. And you can explicitly make it work differently.


yeah, i had read about form-1, form-2 then I started using re-frame and it doesn't need to the form-1, form-2 stuff and for some reason I just completely forgot that local state still needs a form-2. It just completely went out of my head 😞 I'm still learning this stuff and am definitely still in the idiot stage 😄


thanks guys


Would you say getting the scroll position of a textbox and scrolling a second text box to keep them in sync is a good use for component state ?


or would it be better as a re-frame reg-fx ?


feels like local state makes more sense.

p-himik 2021-04-27T10:08:00.200600Z

I agree.

p-himik 2021-04-27T10:10:07.200800Z

With an atom, you might also notice lags in scroll position synchronization. If that's an issue, you might want to combine two text boxes in a single component and sync their scrolling position via regular imperative JS.


Yeah, that's a good point. I do actually see a tiny lag... This seems to work ok though:

:on-scroll (fn [^js e]
              (let [scroll-pos (.. e -target -scrollTop)]
                  (-> js/document
                      (.getElementById "lineNos")
                      (set! scroll-pos))))
Is that reasonable ?


I've put both textboxes in the same component / function

p-himik 2021-04-27T10:13:38.201400Z

(.getElementById "lineNos") - not a great thing, impossible to reuse. Use React refs instead.

p-himik 2021-04-27T10:14:26.201700Z

Otherwise, seems reasonable, yeah.


you mean `


p-himik 2021-04-27T10:15:36.202100Z

Nope. I mean this:


thanks! I'll have a read

p-himik 2021-04-27T10:17:32.202500Z

(reagent/with-let [ref2 (reagent/atom nil)]
    [:textarea {:on-scroll (fn [^js e] (when-some [node2 @ref2] ...))}]
    [:textarea {:ref #(reset! ref2 %)}]])