Fork me on GitHub
#reagent
<
2017-11-25
>
rgm00:11:22

does anyone know how to clear out a DOM element as part of componentDidUpdate? I'm having some issues with d3 + reagent updating correctly and I just want to see if I can make it work in the most brutal fashion: render stores a ref in component state on render, componentDidMount passes the ref to D3 to draw into, then componentDidUpdate just blows away the ref's contents entirely and D3 redraws into the same ref.

rgm00:11:47

(I'm in that whole "make it work" part of the "make it work -> correct -> fast" part of the cycle).

mikethompson00:11:39

I can't help as far as blowing away a component in componentDidUpdate, but I can tell you that changing the key on a component causes it to be recreated

rgm00:11:17

oh, maybe that'd do it... don't use a ref but just use a subcomponent

rgm00:11:50

hm, so in render maybe I just use some hash of the data being passed to D3 as a key, and then that prompts a full re-mount?

rgm00:11:06

(ie. when the props data changes?)

rgm00:11:28

(also, to be clear I feel dirty about all this)

p-himik07:11:40

How can values of a JS object and of a r/atom be bidirectionally synced, but without unnecessary assignment and reset!? E.g. a r/atom is changed, the change is detected with the help of r/run! and is propagated to the JS object. The JS object is wrapped in a Proxy, so it detects all attempts to set attributes and propagates them to the r/atom. Now, the chain should interrupt since r/run! should detect that the value did not in fact change. But still, is there a way to prevent such unnecessary assignments? I can, of course, just compare the two before trying to assign anything, but maybe there's some other way.

noisesmith12:11:32

instead of checking equality you can have a special key that indicates the change is a sync

noisesmith12:11:35

for example, from within add-watch (on the cljs side), check if :sync is one of the changed keys (you can easily check changed keys with clojure.date/diff), and if so, don't send the change back to the js side

p-himik12:11:04

I think clojure.data/diff should be slower than a simple equality check, which I can use before trying to propagate the change. Another problem with :sync is that it won't work well with (swap! my-ratom assoc some-key some-value) from somewhere else - :sync value will not be changed, so the change won't be propagated to the JS object. I ended up using just what I mentioned - simply compare two data objects before trying to sync anything.