2024-01-09 reagent | Clojure Slack Archive

reagent

Ivana 2024-01-09T10:32:42.238379Z

I'm using the same component for both login & sign-in (register) puproses, and want to clear local state & reset (cleanup) the form only if input arguments were changed (not on local state change). My code below works, but isn't it a dirty hack? Or it's regular way to use the implicit side effects on component render?

(defn- register-login [register?]
  (r/with-let [state (r/atom nil)
               old-argv (atom register?)
               ref (atom nil)]
    ;; emulation of :component-did-update
    (do
      (when (and (not= register? @old-argv)
                 @ref)
        (reset! state nil)
        (.reset @ref))
      (reset! old-argv register?))
    [:form.main-header
     {:ref #(reset! ref %)
      :on-submit (fn [e]
                    ................

p-himik 2024-01-09T10:37:11.622159Z

Sometimes you do have to use something like that. A cleaner approach would be to use a form-3 component and check that the only property has changed in :component-did-update. However, in your case I'd probably extract all the common parts into their own vars and use those to create separate form components - one for logging in and another for signing up.

✅ 1

Ivana 2024-01-09T10:39:56.941499Z

Thanks alot, as usual! 🙂

Ivana 2024-01-09T10:50:56.465879Z

Finished with 2 small components with different states while core is stateless form-1 component

(defn- register-page []
  (r/with-let [state (r/atom nil)]
    [register-login-core true state]))

(defn- login-page []
  (r/with-let [state (r/atom nil)]
    [register-login-core false state]))

p-himik 2024-01-09T10:53:37.283649Z

Nice. FWIW, I usually suffix the names of such components with -impl instead of -core.

✅ 1

Ivana 2024-01-09T10:55:49.121469Z

Ok. Btw, should I call that -impl as component or as regular function in round parens (register-login-core false state) ?

p-himik 2024-01-09T10:56:45.823169Z

Doesn't matter that much when register-login-core doesn't have any state on its own.

👍 1

souenzzo 2024-01-09T16:19:35.717649Z

Hello I'm working a big reagent app that uses r/with-let to manage the state. The issue was: a component was losing the state during a re-render. I managed to fix it my replacing a component call [my-wired-table ...] with a function call (my-wired-table ...) I'd like to know where can I read more about reagent implementation and the implications of [] vs (), or even the internals of r/with-let.

p-himik 2024-01-09T16:24:10.129079Z

Usually it's the opposite - using () instead of [] can lead to a lost local state. [] creates a new component from the passed function, () just calls your function, that's it. I don't think r/with-let is documented to the fullest extent anywhere, so I'd suggest studying its implementation. If you can create an MRE, I'd be curious to take a look.

Ellis 2024-01-09T16:25:29.678849Z

https://cljdoc.org/d/reagent/reagent/1.1.0/doc/tutorials/using-square-brackets-instead-of-parentheses-

Ellis 2024-01-09T16:25:54.729299Z

And for with-let https://cljdoc.org/d/reagent/reagent/1.1.0/doc/tutorials/creating-reagent-components#appendix-b---with-let-macro

souenzzo 2024-01-09T16:27:06.784269Z

> Usually it's the opposite Thank you. I used to understand things that way too. good to know that I'm not getting crazy > If you can create an MRE, I'd be curious to take a look. I'm trying to do that.

Clojurians Log v2

reagent