-1

Why should a developer create keys for child elements in React? Why can't React itself do this?

Alexander van Oostenrijk
  • 4,644
  • 3
  • 23
  • 37
Uku Lele
  • 514
  • 1
  • 9
  • 14
  • Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) – Danial Aug 19 '21 at 07:59
  • Besides the obvious use in [Lists & Keys](https://reactjs.org/docs/lists-and-keys.html#keys), they do have other [practical purposes](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) if you dig through the docs enough. – Drew Reese Aug 19 '21 at 08:01

4 Answers4

2

React uses the unique keys you provide for the items in a list to compare lists when generating a mutation. That is, the state has changed - items have been added to or removed from the list - and React needs to update the DOM.

A list may contain items with the same content, so that React cannot generate unique keys from the items. Also, how would it know which list items refer to the same object in the state? For a static list that never changes, that is not a problem (and you can safely use the list index as a key), but for lists that change, it is.

It is therefore important that you provide React with a unique key, and you have the opportunity to provide it with a key that allows it to make efficient comparisons - say, compare items by numeric ID, and not comparing strings.

See also https://reactjs.org/docs/reconciliation.html#recursing-on-children for more information.

Alexander van Oostenrijk
  • 4,644
  • 3
  • 23
  • 37
0

Keys help in React js to identify which objects have changed, or added, or are removed. Each child in an array should have a unique "key" prop. Check the render method of the Table Component. It helps to keep track whenever you change the component.

bernieslearnings
  • 1,424
  • 4
  • 17
  • 27
Asad Wali
  • 33
  • 1
  • 5
0

Keys help React identify which items have changed (added/removed/re-ordered). To give a unique identity to every element inside the array, a key is required. Each item in the array has an id associated with it. Hence, this is the id that is assigned as a key for each item.

You can read more on this medium blog post.

Alexander van Oostenrijk
  • 4,644
  • 3
  • 23
  • 37
crispengari
  • 7,901
  • 7
  • 45
  • 53
0

First of all, you can control in what condition should a component re-render by giving it a key prop. You can check the codesandbox, everytime you click the button, the key to the jsx element changes, causing it to re-render and get the animation effect.

Also, react shouldn't decide what keys should your jsx element get. If it is defaulted to an index like:

arr.map((item, index) => <div key={index}>...

Then, you may run into issues when you need to sort, update, change the array. Here is a good example

Sinan Yaman
  • 5,714
  • 2
  • 15
  • 35