Clojurians Log v2

@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: https://purelyfunctional.tv/guide/reagent/

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.

I agree.

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")
                      (.-scrollTop)
                      (set! scroll-pos))))

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

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

Otherwise, seems reasonable, yeah.

you mean `

React.findDOMNode(

Nope. I mean this: https://reactjs.org/docs/refs-and-the-dom.html

thanks! I'll have a read

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