@drewverlee it is because React embodies this formula UI = f(s)

The UI rendered (for the user to look at) is a function f of the applications state s. So that is the sense in which React is "functional" (and liked because of it).

In order to be efficient about it, React does all the virtual DOM dance, but that's just implementation detail.

with reagent, how would I fetch a key meta that's on an object that gets re-rendered. I have components that get rendered by a for loop dynamically and want to add a random key only if the original component being re-instantiated (not re-rendered) uses the same key.

(for [c content]
       (do
         (js/console.log (meta c))
         (with-meta c {:key (js-uuid)})))

the offending code

since this helper is part of a for loop and content is just a rest args, it unfortunately warns about keys

@theeternalpulse just to be clear: you are using a random number as a :key to force rerenders?

Can you state more generally what you are trying to achieve?

Have a glance at this ... just to make sure we're on the same page https://stackoverflow.com/a/37186230/5215391

so the function is called every time I update the state, and I want only keys the first time any item is created, when this function is called again I want to check the current key and just re-use that

Is it general practice to put a key on anything that is bound to a value that might change?

Did you have a look at the link provided above?

I guess there's a gap in understanding why it complains about keys for a for loop, but not if I just put them on the page

I feel like it will help

Here it is again: https://stackoverflow.com/a/37186230/5215391

for what it is worth, although mike explained it nicely, this is the key bit and it is a very sneaky thing to fully grok The list provided by the map is folded into the [:ul] vector. At the end of it, no list in sight. Just nested vectors.

there is a big difference in reagent between [:div '([:div] [:div])] and [:div [:div] [:div])]

the first one requires keys and the second one doesn’t

and when you use something like map, you get the first structure

what mike is suggesting is: if you really aren’t switching the order of the children, just use into instead of map so that you get the second structure

ah yes, sorry I missed the answer earlier, I got it. In my case

(defn styled-component [tag styles]
  {:style/indent 1}
  (fn [attrs & content]
    [tag (merge-with str attrs {:class (apply with-styles styles)})
     (for [c content] c)])) ;;<---

(defn styled-component [tag styles]
  {:style/indent 1}
  (fn [attrs & content]
    (into [tag (merge-with str attrs {:class (apply with-styles styles)})] ;;<---No more warnings :)
          (for [c content] c))))

can’t you just replace (for [c content] c) with content

(also, note that if you really are rendering a long list of things and you are going to be adding/subtracting/reordering items, you should think about solving this problem by assigning a random key to the original data when you create it or fetch it from the server and then using that data as the key. trying to do it on the fly is going to be a nightmare)

yeah, I think I learned that lesson 🙂. and you're right, I forget that it's already a list

also why do you js event listeners go haywire, I only have one set-interval event added to a level 2 component at the beginning

it goes all the way to 700+ in the chrome tools