something i've always wondered about but never found an elegant solution: i have a simple event to update a text filter, and then a few dynamic subscriptions to filter a collection based on the filter value (reg-ex string matching). as i update the filter value, the text filter component drops input characters while the subscriptions do their job. i don't think this is a use case for ^{:flush-dom} (or is it?). should i bite the bullet and move to web workers?

i realise this is a single thread problem and irrespective of the framework, but i was wondering if there's a nifty re-frame way to handle it. 🙂

Try to do a dispatch-sync instead of a dispatch in that one case.

Where performance is needed

So I'm guessing that it isn't the subscriptions

(Although obviously I don't know enough to really be sure)

thanks mike. specifically, a dispatch-sync instead of a dispatch when firing the event to update the text filter value based on the input textbox?

Yeah if you are dispatching on each keypress

and you are droping chars

try dispatch-sync instead

thanks, i'll give it a shot

hmm. still dropping characters.

[:input.form-control.form-control-lg.mb-4
        {:type      "text"
         :value     @(subscribe [::events/text-filter database])
         :on-change (fn [e] (dispatch-sync [::events/set-text-filter database (oget e :target :value)]))}]

not binding :value to a subscription solves the problem, but it's still a little choppy

I’ve solved text-field problems by binding :value to a ratom and using goog.functions/debounce to ‘flush’ the ratom state to app-db using dispatch after 200ms or so.

This is not super elegant but it works. No dropping characters or any other symptoms (that I’m aware of).

good thinking. i tried that, but found i was still dropping characters between when the debounce eventually fired and when a new char was inputted directly thereafter. less characters lost but still one every once in a while. if it worked for you then i must be doing something wrong. will review my code 🙂

Here’s my take if you want to have a look https://github.com/lipas-liikuntapaikat/lipas/blob/dev/webapp/src/cljs/lipas/ui/components.cljs#L383-L412

It’s doing tons of other stuff as well so it’s a bit messy example.

happy to see an open source example! thanks @valtteri, i'll check it out.

You’re welcome!

I’m using events.cljc to define events and using fn-traced from day8.re-frame.tracing (0.5.1). However the code won’t compile and throws a java.lang.ClassNotFoundException: debux.dbgn. Code compiles when I rename my file to events.cljs, indicating that the original tracing.cljc might not be compatible on both platforms.` For instance, debux.dbgn is written in clj.

(ns app.events
  (:require
   [re-frame.core :as reframe :refer [reg-event-db reg-event-fx inject-cofx path after]]
   [cljs.spec.alpha :as s]
   [app.db :as db]
#?(:clj
   [day8.re-frame.tracing :refer [fn-traced defn-traced]]
   :cljs
   [day8.re-frame.tracing :refer-macros [fn-traced defn-traced]])))

(reframe/reg-event-db
 ::initialize-db
 (fn-traced [_ _]
            db/default-db))