Fork me on GitHub
#reagent
<
2019-08-06
>
kanwei20:08:16

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?

manutter5120:08:59

What’s the symptom? Components fail to display the new values?

manutter5120:08:25

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.

kanwei21:08:12

yeah that fixed it

kanwei21:08:21

but I was wondering what the root cause is

kanwei21:08:56

is reagent not smart enough, or is react too aggressive?

kanwei21:08:22

and how do you ensure that your code is correct without just manually checking everything?

oconn21:08:54

That’s a React thing https://reactjs.org/docs/lists-and-keys.html#keys - used to determine what’s new @kanwei

🚀 4
kanwei22:08:19

@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

Noah Bogart22:08:30

which things don't need to be keyed, that you find surprising?

lilactown22:08:22

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

lilactown22:08:30

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)])]

dominicm07:08:43

There's another case it's useful too, around uncontrolled inputs. Sounds like that's the case here too.

lilactown14:08:46

I’m not sure when you would actually want to use an uncontrolled input

lilactown14:08:12

you can use key as a way to force a re-mount of a particular element, but it’s hacky.

lilactown14:08:32

you’re usually having to get around some other limitation of your or a library’s design

dominicm14:08:22

funny, I mostly use uncontrolled inputs.

dominicm14:08:29

When would you want to use a controlled input? 😄

dominicm14:08:46

I don't find myself needing to store every key press of every input, generally.

lilactown19:08:50

If the value of the input is driven off of some state, then it should be controlled

lilactown19:08:38

otherwise you risk state and UI becoming out of sync

lilactown19:08:37

unfortunately in reagent we can’t use (real) controlled inputs because of the way it does async rendering, which causes issues on certain platforms

lilactown19:08:14

and confusion when people try and use libs like material or bootstrap React libs w/ their special inputs

dominicm19:08:48

Sure, but I don't find that's true most of the time.

dominicm19:08:01

Usually I just hook onsubmit and get the form data

lilactown19:08:32

but if you’re using keys to trigger a re-render, it should probably be controlled no?

dominicm21:08:29

I'm remembering the specific case now, it's related to defaultValue and external buttons to change that value.

kanwei23:08:36

yeah i'll try to come up with a simple base case

kanwei23:08:49

it's definitely not just in seqs that this occurs