Issues in your code: • Mostly a cosmetic one - don't use (vector ...), instead just use the vector literal, [...] • Don't call gensym on each render • Don't use dispatch or dispatch-sync in view functions • Don't use () for Reagent components - use [] instead, the difference is documented somewhere • Don't store atoms in app-db - store the values themselves. There must be no swap! or @ in your subscription/event handlers

Agreed with all of your recommendations and I'll fix the code, but as far as the second goes, where can I put the gensym so it gets called before the button group is rendered, but so it doesn't get re-invoked when something higher up the render tree gets re-rendered (other than shoving it all the way up into the main function and then passing it down through the intermediate render functions)? Basically, I want the id to be created when the group is created, but later I don't want to re-create the group each time the container is re-rendered.

Rendering should be a side-effect of your data change - not the other way around. In other words, the fact of something being rendered should not affect anything. There are exceptions, of course (e.g. when you interact with a complex JS component), but this is not such a case. Things are rendered because of data changes - so use gensym or anything like that in things that change the data, namely in event handlers or things that feed them data, like effects or JS event handlers (`:on-click` for example).

I'll try that.

Thanks for the tips. They made the code shorter, plus it has the advantage of working now. Thanks again.

I was wrong - things are not quite working as I had thought. Here's my new code:

(defn radio-button-group
  "Build a radio button group with the given id having
   cheices as labels/values and the given wrapper (one of h-box or v-box)."
  [choices wrapper id]
  [wrapper
   :src (rc/at)
   :size "none"
   :gap "20px"
   :children
   (mapv
    (fn [choice]
      [radio-button
       :src (rc/at)
       :label choice
       :value choice
       :model @(rf/subscribe [:radio-button-group-state id])
       :on-change #(do (js/alert %)(rf/dispatch [:on-radio-button-group-change id %]))]) choices)])

(defn container
  []
  (js/alert "Rendering container")
  (let [rbg-id (gensym)]
    [v-box
     :children
     [[radio-button-group ["A" "B" "C"] h-box rbg-id]
      [labeled-component "Radio button group value" [:div @(rf/subscribe [:radio-button-group-state rbg-id])]]]]))

You can put that (gensym) some place where you initialize re-frame's app-db and grab the ID from there. Alternatively, you can switch from a form-1 component to a form-2 one or to reagent.core/with-let to keep the ID stable between re-renderers. But it won't save you if container is not merely re-rendered but re-mounted, so I'd advice against that approach unless you absolutely certain about what you're doing and why.

I turned the form-1 into a form-2 component. I had forgotten about them. It's now working as I expected. Thanks again for your help.

Yeah, the callstack will show re-frame's internals. You can put a conditional breakpoint in your browser right where events are scheduled, in those very internals. Alternatively, you can register a temporary global interceptor that would check for :fx being nil.

That makes sense. Thanks 👍