Fork me on GitHub
#reagent
<
2018-06-22
>
kurt-o-sys12:06:37

hey all, very often, one needs unique keys when using react (reagent). In order to generate these unique keys: would you use some kind of hashing function? For now, I'm quite often just stringify the data/component and use that as hash. I'd prefer to have shorter ones 😛... Anyone using a kind of hashing function? Wich one?

manutter5113:06:52

I just use any string unique enough to distinguish one item from another, usually something like (str "my-component-item-" (:id my-obj))

tord13:06:18

I actually find that I need uniquely keyed sequences very rarely. The performance benefits of keyed sequences are really only noticeable when the sequence is very long or the sequence elements very complex. In the majority of cases when there is no obvious key, I just rewrite using into instead.

👍 4
kurt-o-sys13:06:04

right, ok...

tord13:06:02

To be more specific, instead of [:div (for [x xs] ^{:key (some-key-fn x)} [some-component x])], I do (into [:div] (for [x xs] [some-component x])).

manutter5113:06:27

I’ve had similar experiences, though I did have one weird case where my carousel was misbehaving until I added explicit keys. The problem was I was using a prev, curr, and next set of slides, and using CSS transitions to do the sliding, then updating the trio of slides with a new set of prev, curr, and next values. Without the keys, I’d update the slide data, but the app would still show the original 3 slides.

manutter5113:06:47

so it would slide nicely, but then pop back to the original slide.

pesterhazy15:06:27

usually you don't need a string like (str "my-component-item-" (:id my-obj)) but (:id my-obj) will be sufficient

pesterhazy15:06:47

the key needs to be unique only locally, in the context of the parent