This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-08-06
Channels
- # aleph (1)
- # beginners (180)
- # calva (16)
- # cider (29)
- # clj-kondo (47)
- # cljsrn (5)
- # clojure (40)
- # clojure-dev (39)
- # clojure-europe (1)
- # clojure-italy (25)
- # clojure-nl (9)
- # clojure-russia (1)
- # clojure-spec (8)
- # clojure-uk (83)
- # clojurescript (54)
- # core-async (2)
- # datomic (20)
- # defnpodcast (7)
- # figwheel (6)
- # fulcro (6)
- # jobs (5)
- # joker (4)
- # kaocha (4)
- # luminus (4)
- # off-topic (8)
- # onyx (6)
- # pathom (14)
- # re-frame (28)
- # reagent (30)
- # remote-jobs (2)
- # shadow-cljs (88)
- # spacemacs (2)
- # specter (17)
- # sql (25)
- # tools-deps (78)
- # xtdb (1)
- # yada (2)
anyone else ever run into the issue where you define a form-2 component, but then react tries to reuse the DOM elements and things don't work properly?
What’s the symptom? Components fail to display the new values?
I get that one a lot: you have to make the new values part of your :key
metadata for the component/DOM-node that’s failing to update.
and how do you ensure that your code is correct without just manually checking everything?
That’s a React thing https://reactjs.org/docs/lists-and-keys.html#keys - used to determine what’s new @kanwei
@oconn it is, but it's still unclear as to why some things need to be "keyed" whereas most things don't need to be
which things don't need to be keyed, that you find surprising?
keying things can also be used to route around issues with certain anti-patterns or corner cases, so I think seeing an example you found surprising would help determine if it’s a Reagent, React or user error
typically, you should only have to key elements generated from a sequence, e.g.:
[:ul
(for [person people-sequence]
[:li {:key (:id person)}
“Name: “ (:name person) “, Age: ” (:age person)])]
There's another case it's useful too, around uncontrolled inputs. Sounds like that's the case here too.
you can use key as a way to force a re-mount of a particular element, but it’s hacky.
you’re usually having to get around some other limitation of your or a library’s design
If the value of the input is driven off of some state, then it should be controlled
unfortunately in reagent we can’t use (real) controlled inputs because of the way it does async rendering, which causes issues on certain platforms
and confusion when people try and use libs like material or bootstrap React libs w/ their special inputs
but if you’re using keys to trigger a re-render, it should probably be controlled no?