This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-01-23
Channels
- # aatree (72)
- # aws (12)
- # beginners (34)
- # boot (256)
- # braid-chat (12)
- # cider (20)
- # clara (8)
- # cljs-dev (1)
- # cljsjs (1)
- # cljsrn (38)
- # clojure (61)
- # clojure-dev (10)
- # clojure-ireland (1)
- # clojure-japan (1)
- # clojure-sg (2)
- # clojurescript (48)
- # community-development (3)
- # conf-proposals (3)
- # core-async (6)
- # cursive (8)
- # datomic (4)
- # emacs (9)
- # hoplon (1)
- # leiningen (1)
- # mount (9)
- # off-topic (4)
- # om (109)
- # parinfer (26)
- # perun (4)
- # proton (5)
- # reagent (14)
- # vim (3)
@mpdairy: "A Reaction will dispose of itself when the number of watches (things derefing it) transitions from 1 to 0.” I haven’t done anything with on-dispose myself, but maybe that’s helpful? https://github.com/Day8/re-frame/issues/29
So I am dereferencing the test reaction inside of a component named ratom-test
that is called inside another component like this (when (= @rtoggle 1) [ratom-test])
I have a button that changes the rtoggle
atom to 0, after which the [ratom-test]
component disappears. Shouldn't that then dispose the reaction that I derefed in the ratom-test
component?
Really digging petrol by @krisajenkins https://github.com/krisajenkins/petrol
Ok I got :on-dispose working. It worked when I tried it on the real thing, though it didn't work for some reason on my test setup.
(def toggle (r/atom 1))
(defn compo [n]
(println "compo: " n)
[:div n])
(defn test-app []
[:div
(when (= @toggle 1) [compo 5])
[compo 1]
[compo 2]
[compo 3]
[compo 4]
[:button
{:on-click (fn [] (swap! toggle #(if (= % 1) 0 1)))}
"Toggle"]])
When I click on the "Toggle" button, it re-renders compo 1-4 every time and 5 every other time. However, if I move (when (= @toggle 1) [compo 5])
down to the bottom, it doesn't re-render any of the other compos.
It seems like it shouldn't have to re-render any of the later sibling elements just because one gets deleted.
Put a key
on the components, so that React knows which is which: ^{:key "1"}[compo 1]
^{:key "2"}[compo 2]
etc
At the moment, when the first component disappears, (or reappears) React doesn't have enough information to know that there's been a shuffle up or down. So it just rerenders all. Once you give keys, you are giving it more information, and it can avoid the unnecessary rerender.