oops.. wrong channel

@mikethompson: I've read it in the past, but I'll reread it, thank you.

I want to live in a world where all documentation is written by @mikethompson.

in general, I'm trying to wrap my head around subscriptions performance. do I need to be careful with them? is it O(const), log(n), n, n^2, smth else?

ah, I see. the (subscribe [:foo some-id]) , where some-id is a key into some map, will be linear in complexity, because equality check will be triggered on every map update (as it is dereferenced in subscription handler) for every subscription

@si14: I think #C073DKH9P is better channel for this 😉

pepe: oh, sorry!

@si14: no worries, just better probability of correct answer. The audiences are pretty mixed between these two

Does anyone know how the :key thing works with reagent/react? I can't seem to get my warnings to go away and I'm not seeing the :key I set in the data-reactid attribute on the DOM.

My component:

(defn tag-checkbox [tag-name]
  (let [user-tags (subscribe [:user-tags])]
    (fn []
      [:div.col-sm-6 {:key tag-name}
       [:li.list-group-item
        [:label tag-name]
        [:input.pull-right {:type "checkbox"
                            :checked (or (some #(= tag-name %) @user-tags))
                            :on-change #(if-let [checked (-> % .-target .-checked)]
                                          (dispatch [:add-user-tag tag-name])
                                          (dispatch [:remove-user-tag tag-name]))}]]])))

@frank: I do it with metadata, so ^{:key some-key} just before the component

@pepe like this?

(defn tag-checkbox [tag-name]
  (let [user-tags (subscribe [:user-tags])]
    (fn []
      ^{:key (str "admin-" tag-name)}
      [:div.col-sm-6
       [:li.list-group-item
        [:label tag-name]
        [:input.pull-right {:type "checkbox"
                            :checked (some #(= tag-name %) @user-tags)
                            :on-change #(if-let [checked (-> % .-target .-checked)]
                                          (dispatch [:add-user-tag tag-name])
                                          (dispatch [:remove-user-tag tag-name]))}]]])))

@frank: exactly

don't think it worked 😞

hmm

@frank: what about place it in the body of iteration, where you call this component?

I'm not sure what you mean... the thing calling the component looks like this

(defn page []
  (let [sme-tags (subscribe [:sme-tags])
        user-tags (subscribe [:user-tags])]
    (fn []
      [:div.container-fluid
       [:div.row
        [:div.col-xs-6.col-xs-offset-3
         [:div.panel.panel-primary
          [:div.panel-heading "Enabled Subscriptions"]
          [:ul.list-group
           [:div.row
            (map #(do [tag-checkbox %]) @sme-tags)]]]]]])))

Try: (map #(do ^{:key (str %)} [tag-checkbox %]) @sme-tags)

@mikethompson: beat me. As always 😉

You want the key to be on the tag-checkbox itself, not on some component burried within it.

@mikethompson @pepe It worked! thank you

I was under the impression that putting the key on the root div in the component would be the same, but I guess not

No, the root div is one level down.

ah, I see

Thanks again! I've had this issue for so long, but just ignored the warnings since my apps were small

My re-frame experience has been made infinitely better!

@mikethompson: I suspect that you are the person to ask the last question in re-frame channel

hello all! I'm trying to use Clojurescript/Reagent! What is idiomatic way of state propagation in Reagent? Example: if I have atom @a and dependent atoms @b and @c, I want that any updates in @a automatically applied to @b and @c. Thanks.

@mike1452: if your @b and @c are defined as (reaction ...) on @a, the updates will propagate automatically

example: https://github.com/yatesco/re-frame-stiching-together/blob/master/src/cljs/demo/views.cljs#L34 (`db` is an atom for all intents and purposes in that example)

@peterbak: Thank you! Found a solution

(:require [reagent.core :as r] [reagent.ratom :as rr])

(:require-macros [reagent.ratom :refer [reaction]])

(def value1 (r/atom 0)) (def value2 (reaction (+ 3 @value1)))

now on every change of value1 the value2 will be updated automatically with formula (+ 3 @value1)

@mike1452 yup, that's the one

(x-post from cljs) Hi all, I'm looking for a library/example that could help in building a spatial organizer/kanban -style board in clojurescript. Anything to do with drag/drop, sorting, etc. I'm having no luck with my google-fu and any help would be greatly appreciated.

Here is a jquery drag-n-drop with reagent: https://github.com/reagent-project/reagent-cookbook/blob/master/recipes/droppable/README.md

@gadfly361: Thanks! I'll look into that.

I'm working on a droppable reagent component as we speak. But I'm hoping to accomplish without the use of jQuery

@bostonaholic: that would be pretty sweet.

@bostonaholic that's awesome! Be a great addition to the cookbook, if you were so inclined :) (I'm not keen on using jquery either lol)

I'm working on building out for my client an internal reagent component library

their own "reagent cookbook" if you will

Ahh gotcha, nice :)