This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-02-15
Channels
- # announcements (8)
- # architecture (9)
- # autochrome-github (1)
- # babashka (48)
- # beginners (55)
- # calva (36)
- # cider (16)
- # clj-commons (1)
- # clj-kondo (38)
- # cljs-dev (44)
- # cljsrn (1)
- # clojure (164)
- # clojure-europe (35)
- # clojure-nl (2)
- # clojure-norway (10)
- # clojure-uk (23)
- # clojurescript (50)
- # conjure (24)
- # core-async (1)
- # cryogen (2)
- # cursive (38)
- # datalevin (11)
- # datascript (2)
- # datomic (13)
- # duct (1)
- # emacs (16)
- # events (12)
- # exercism (3)
- # figwheel-main (7)
- # fulcro (26)
- # honeysql (5)
- # integrant (1)
- # jobs (3)
- # kaocha (6)
- # lsp (72)
- # malli (22)
- # nextjournal (35)
- # nrepl (1)
- # off-topic (34)
- # pathom (5)
- # polylith (8)
- # portal (40)
- # re-frame (14)
- # reagent (42)
- # reitit (1)
- # releases (1)
- # remote-jobs (1)
- # reveal (9)
- # sci (2)
- # shadow-cljs (13)
- # sql (3)
- # tools-deps (33)
- # vim (25)
hello, just read the https://github.com/reagent-project/reagent/blob/master/doc/WhenDoComponentsUpdate.md to understand why my component is re-rendering
the article says that if the parameters stay the same the component should not re-rendeer.
update-start-place (fn [place]
(when place.formatted_address
(reset! start-place place)))
even when the start-place
ratom value changes my component doesn't re-render - as expected
[:div.form-floating.mb-3
[autocomplete
{:on-place-changed (fn [place]
(when place.formatted_address
(reset! start-place place))}]]
Even though you, as a human, can see that the inline function here still is logically the same, every anonymous function is always not= to every other because they are distinct objects in memory.
(= #(+ 1 1) #(+ 1 1))
;;=>false
is it because the update to the parent components cause redefinition of the :on-place-changed
function?
and since reagent uses =
to check if params changes it decides that the :on-place-changed
has changed?
if that's the case , how does it work in the https://github.com/reagent-project/reagent/blob/master/doc/WhenDoComponentsUpdate.md ?
(defn more-button
"I'm a button labelled 'More' which increments counter when clicked"
[counter] ;; a ratom
[:div {:class "button-class"
:on-click #(swap! counter inc)} ;; increment the int value in counter
"More"])
The reason why the more-button
component doesn’t re-render is explained a little further down in that section. Basically its input, counter
, has not changed.
Another source explaining this same concept is the re-frame section on improving performance: https://day8.github.io/re-frame/Performance-Problems/#4-callback-functions
@UTFAPNRPT, but if the parent re-renders, it generates new hiccup thus creates new closure (inline functions), which are passed to the components as the parameters, right? These newly generated functions (listeners) will result false
during params comparison, which will make the child component re-rendeer as well. correct?
@UTFAPNRPT the link you provided describes the effect precisely. My issue is not low performance tho. Each render of my component (google autocomplete) calls google api and binds to the element via :ref
this causes the google places autocomplete being created every render.
If the parent re-renders, yes, it generates new hiccup, but it still calls more-button
with the exact same property as the prior call, which is the ratom counter
, which hasn’t changed. I’m not making this up, I’m just repeating the description in https://github.com/reagent-project/reagent/blob/master/doc/WhenDoComponentsUpdate.md#a-combination of the documentation for reagent.
Hi here, i need to create
<a-component name></a-component>
With HICCUP I can do
[:a-component {:name ""}]
but this doesn’t seem to work with Reagent.
How should I do it?But it doesn’t work for me..
[:a-box {:scale-on-mouse-enter true :color "#AAAAAA" }]
is rendered as
<a-box scaleonmouseenter="true" color="#AAAAAA"></a-box>
Let's take a step back. What are you trying to achieve with that? What's a-box
, what attributes does it expect originally, how is it used in JS, if at all?
It is part of a-frame library,
there are components like <a-box> etc.
You can define your own component like scaleonmouseenter and attach it to an existing component. For example
<a-component extra-component {:position … :width …}></a-component>
any extra-component must be registered first via a-ftame functions
like
<a-scene>
<a-entity hello-world></a-entity>
</a-scene>
AFRAME.registerComponent('hello-world', {
init: function () {
console.log('Hello, World!');
}
});
Alright, so those are custom elements, nice. I wanted to exclude the option where :a-box
was actually supposed to be a-box
in Hiccup. :)
Replace that :scale-on-mouse-enter
keyword with a "scale-on-mouse-enter"
string. Reagent treats keywords differently.
So I ended with
[:a-box {"scaleonmouseenter" ""}]
if I do
[:a-box {"scaleonmouseenter" true}]
It fails with an error from “scaleonmouseenter” component:
aframe-master.js:9749 Uncaught TypeError: Cannot read properties of undefined (reading 'x')….
😳Instead try [:a-component "name"]