React: Document what happens if keys are not used at all

[ghost]

Would be nice if the doc explicitly stated what happens if one doesn't use keys at all.

Will this be just performance issue?

[gaearon]

If you don't specify keys React will use indexes as keys. This can potentially be both a performance and a correctness issue if items are re-ordered.

Performance: instead of reordering DOM nodes, React would naïvely update components (even though every single one of them has “changed” due to reordering).

Correctness: the state of the first item (or any deep state inside of it) will stay attached to the first item even if it has “moved” in the data source. This can be confusing with inputs retaining their values in the original places even when their parent components reorder.

Does this help? If it does, would you like to submit a PR to make the docs better?

[ghost]

Hi gaeron, thanks.

So you say React will use index as keys. This is important information since in this case, indeed one may get corrupt data.

One could naively think that if he/she ignores keys this is only performance issue.

I think doc has to mention it explicitly.

PS. What is "PR"?

[gaearon]

I meant you could send a pull request to the documentation page to add this information. You can do so by pressing "edit on GitHub" on it.

[ghost]

I used to have a question on that, http://stackoverflow.com/questions/43028765/what-happens-if-i-dont-use-keys-in-react-at-all/.

You can see in one of the comments a person also thought it was only a performance thing.

[ghost]

@gaearon Actually I can't reproduce the issue I thought would happen by using indexes as keys. _The new array elements are still correctly being rendered_ here: http://codepad.org/KYwD3WuM. I expected no updates would happen on UI, since the new array had same indexes. Did I miss something?

[monkindey]

hi, @steve9164 , Thanks for your demo. Maybe we can change the key position to achieve what @gaearon means.

Yours

{this.state.boxes.map(name => <div>{name}: <input key={name}/></div>)}

Edited

{this.state.boxes.map(name => <div key={name}>{name}: <input/></div>)}

[steve9164]

Yep, you're totally right @monkindey. Fixed pen: https://codepen.io/steve9164/pen/oZPJjp

[ajcumine]

I've submitted the above PR, #9284, to add to this information to the documentation and provide an example of the issue with state caused by using indexes as keys.

[bvaughn]

Thank you for filing this issue! 😄

The documentation and source code for reactjs.org now lives in a different repository: reactjs/reactjs.org. (For more info on why we made this move, see issue #11075.)

I've moved your issue to the new repo: reactjs/reactjs.org#79

Let's continue the discussion there! Sorry for the inconvenience.