This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-04-13
Channels
- # aleph (3)
- # announcements (2)
- # babashka (15)
- # beginners (84)
- # biff (28)
- # calva (2)
- # cherry (1)
- # clj-kondo (24)
- # clojure (69)
- # clojure-austin (35)
- # clojure-brasil (7)
- # clojure-conj (2)
- # clojure-europe (83)
- # clojure-losangeles (1)
- # clojure-nl (1)
- # clojure-norway (13)
- # clojure-portugal (5)
- # clojure-turkiye (2)
- # clojurescript (25)
- # css (4)
- # cursive (11)
- # data-science (26)
- # datahike (4)
- # datalevin (2)
- # emacs (19)
- # gratitude (1)
- # honeysql (1)
- # hyperfiddle (45)
- # introduce-yourself (5)
- # lsp (53)
- # malli (8)
- # mid-cities-meetup (1)
- # nrepl (19)
- # pathom (23)
- # practicalli (2)
- # proletarian (1)
- # rdf (2)
- # reagent (28)
- # releases (4)
- # shadow-cljs (11)
- # sql (13)
- # uncomplicate (6)
- # vim (7)
- # xtdb (3)
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.
(swap! app-state assoc-in [:customers] results)
Also, this will work in the other functions as well?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?
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)))))))}]
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
[: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)))}]
Does this look good to you? @U2FRKM4TWNot 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] ...)
.