Fork me on GitHub
#reagent
<
2015-07-10
>
Petrus Theron13:07:23

How can I prevent the Warning: Every element in a seq should have a unique :key when I have something like this:

[:div
  (if (some-pred? v)
    [:p "shown sometimes])
  (if (another-pred? v)
   [:p "also optional"])

escherize14:07:43

you can avoid that by doing:

[:div
  (if (some-pred? v)
    [:p {:key "x"} "shown sometimes])
  (if (another-pred? v)
   [:p {:key "not x"} "also optional"])

escherize14:07:08

i.e. give it a key, it is a huge perf boost, which is why react nags about it constantly

escherize14:07:15

I made some random key function

escherize14:07:24

not sure if it's the proper way to do it.

zoldar14:07:08

@escherize: the thing is, the key should be consistent for a given element - so that when DOM diff is done it will be able to tell that it's the same as before

mikethompson14:07:22

See intro docs: http://reagent-project.github.io/ Look for the mention of ^{:key item}

zoldar14:07:54

it's important in cases where, for example you add something to the beginning of a long list - without key, every element in the list would get rerendered

zoldar14:07:36

so radnom key fn is not the best strategy 😉

escherize14:07:36

well, i've been doing it wrong for a while simple_smile

escherize14:07:36

how about f where f hashes the vector? s.t. (f v) = key

escherize14:07:48

erm that only works if you dont have identical vectors.

mikethompson14:07:07

Keys have to be unique among siblings (not globally unique ... this is a common misunderstanding)

escherize14:07:47

This is the best room in clojurians. Thanks you guys.

mikethompson14:07:29

If you need to generate a key value, and there's none easily available, then this can be useful: http://google.github.io/closure-library/api/namespace_goog.html#getUid

coyotespike23:07:43

I'm trying to do, basically:

coyotespike23:07:48

(if (valid-password? @password)
[save-button @password]
[wait-button])

coyotespike23:07:00

This either does not replace the buttons correctly (always returning save-button), or fails to pass on the updated value of password.

coyotespike23:07:07

I am pretty sure this has to do with how React renders components, but I'm not sure about the right way in Reagent/Re-frame.

coyotespike23:07:12

Throwing it in its own function, or using dommy to hide one, failed to fool React. Any ideas how this should be done?