I'm trying to use the r/track as it's outlined in the docs to trigger window events and have it clean-up on component unload soI have this

(defn key-code
  "Returns pointer to currently pressed key"
  []
  (r/with-let [key-pointer (r/atom nil)
               event "onkeypress"
               handler (fn [k]
                         (do
                           (js/console.log "####tracked hit" k)
                           (reset! key-pointer k)))
               _ (.addEventListener js/document event handler)]
    @key-pointer
    (finally
      (.removeEventListener js/document event handler))))

(defn letter-button
  "Renders a button displaying the key
  and playing an audio clip if clicked"
  [{:keys [key clip]} key-code]
  (let [audio (when clip (js/Audio. clip))
        _ @(r/track key-code)]
    (fn []
      [:div {:class 'letter
             :on-click (when clip #(play-pause audio))}
       (char->str key)])))

I guess maybe event lifecycles would be a better fit?

@theeternalpulse at first glance, I don't think you're meant to use r/with-let and finally outside of a reagent component. The function key-code isn't a reagent component, so that's probably why it is blowing up. If you merged the content of key-code in to letter-button, it may work for you.

I'm following this part of the guide https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md#appendix-b---with-let-macro

which seems to externalize the current state of the event in a separate function, and tracks it inside a component

The very last example, I'll try the first one in that section, which seems to be what it may be expecting

that seemed to do it 😕 not arguing with results

(defn letter-button
  "Renders a button displaying the key
  and playing an audio clip if clicked"
  [{:keys [key clip]} key-code]
  (r/with-let [audio (when clip (js/Audio. clip))
               key-pointer (r/atom nil)
               handler (fn [k]
                         (do
                           (js/console.log "####tracked hit" k)
                           (reset! key-pointer k)))
               _ (.addEventListener js/document "keypress" handler)]
  [:div {:class 'letter
         :on-click (when clip #(play-pause audio))}
   (char->str key)]
  (finally
    (.removeEventListener js/document "keypress" handler))))

sweet, thanks @gadfly361 that worked nicely, just had to ensure the click hander was checked properly.

@theeternalpulse np, glad you got it working!