goog.functions.debounce probably. And either make the input an uncontrolled component or a controlled one with an intermediate model where you debounce only the outgoing :on-change call and not changes to the inner model.

[:input {:type "text"
                  :placeholder "Search..."
                  :onChange
                  (fn [e]
                    (let [search-term (.-value (.-target e))]
                      (swap! app-state assoc-in [:customers] [])
                      (http-get "/customers" {:search search-term}
                                (fn [results]
                                  (swap! app-state assoc-in [:customers] results)))))}]

This is my code block, @U2FRKM4TW

Seems like you can simply extract that http-get call into its own function and debounce that function.

Could you write a bit of code if you don't mind? I am almost newbie...

(swap! app-state assoc-in [:customers] results)

Sorry, not right now. But you should read the docs of goog.functions.debounce, search publicly available CLJS sources for is usage (GitHub has useful search capabilities for it), an only maybe ask in #C053AK3F9 if you still can't figure it out after that. Also, debounce is quite easy to write. Chances are, you can find one such implementation as well. Regarding the swap! - no idea. It all depends on the rest of the things that aren't in that code block above.

Now I use that inside defn app function, but can we use that swap inside another function?

Yes.

Okay, thanks for your information

Hello @U2FRKM4TW I tried to implement like this

[:input {:type "text"
                  :placeholder "Search..."
                  :onChange
                  (fn [e]
                    (let [search-term (.-value (.-target e))]
                      (goog.functions.debounce
                       (fn []
                         (swap! app-state assoc-in [:customers] [])
                         (http-get "/customers" {:search search-term}
                                   (fn [results]
                                     (swap! app-state assoc-in [:customers] results)))))))}]

What am I wrong with this way?

I add required at the top

(ns client.core
  (:require [ajax.core :refer [GET POST PUT PATCH DELETE]]
            [goog.functions]
            [reagent.dom :as rdom]
            [reagent.core :as reagent]
            [clojure.string :as s]))

Here's the docs on how to require goog stuff properly: https://clojurescript.org/reference/google-closure-library#requiring-a-function

Thank you

[:input {:type "text"
                  :placeholder "Search..."
                  :onChange
                  (fn [e]
                    (let [search-term (.-value (.-target e))]
                      (goog.functions/debounce
                       (fn []
                         (swap! app-state assoc-in [:customers] [])
                         (http-get "/customers" {:search search-term}
                                   (fn [results]
                                     (swap! app-state assoc-in [:customers] results))))
                       1000)))}]

Not really. This way, you'll end up creating the inner (fn [] ...) on every change. It will be a different function every time, so debounce won't be able to properly debounce it - it'll simply execute every single call but with the debounce delay. Instead, you need to create that function outside of the component (or when it's first mounted while making sure that the fn is not recreated on each update), pass the search item as an argument, wrap the fn in debounce, and store that wrapped function. The new function will also accept a search item - and that's what you should call inside that (fn [e] ...).

Thanks for that, I should study clojurescript more

Have fun. :)

And definitely drop by #C053AK3F9 - that channel is not only for Clojure but also for ClojureScript and other things.

Sure, I will move to that channel

Ah, I see that you have already done so and even gotten a useful answer, nice!

Yeah, lol