1

I was trying to understand the usage of keys in React and found this link https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js where 3 scenarios are explained.

  • Using indexes for keys
  • Using of Random Unique Number for keys
  • Using of constant Unique Numbers for keys

<input key={item} id={item} defaultValue={item}/>

In the example, when I used value instead of defaultValue, I see different behaviour (Change in last DOM value not reflecting if new item is added).

Can any one explain the behaviour in three scenarios in the example.

You can find the code here

crazyCoder
  • 329
  • 1
  • 2
  • 16
  • 1
    In your case input is an uncontrolled component with default value being set from a variable from your set a value from a props, you make it controlled and hence your need an onChange function to update the props when you update the value. It has nothing to do with keys – Shubham Khatri Feb 01 '18 at 12:42
  • 1
    @shubham Khatri, i'm agree with your point. but Pushkal give us a link to his article. Actually,the article talks about dynamic rendering and importance of keys in this context. – Leeroy_Wonkledge Feb 01 '18 at 12:46

1 Answers1

1

To explain you the three cases with respect to your input case

First: indexes for keys,

When using indexes for keys, the only problem is that if you re-order the data or day delete the data in between, a lot of elements needs to re-render as the key to component mismatch is happening and during reconcilation React is not able to compare elements correctly

Second: Using random number as keys

Using random number in render is worst possible idea for setting keys, as each time render is called, a new random key is generated and assigned to the component and hence the entire DOM elements will be reconciled and re-rendered. With input another issue is that each time you change a value, a re-render is triggered and since the elements are recognized differently because they have different keys, the input loses focus

Third: Using of constant Unique Numbers for keys

This is the best case scenario, as even though the elements are re-ordered or some elements are deleted from the middle of the array, the previously rendered item will always hold the same keys and hence during reconcilation only elements that changed will be re-rendered

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • Thanks for the answer, I was trying to understand the behaviour of keys when using **value** and **defaultvalue** for input field in these cases. – crazyCoder Feb 02 '18 at 04:53
  • @PushkalBoganatham, I think I explained it, What part of my answer is not clear. As I said, with value you make a controlled component with the value in state and everytime you make a change the state is updated causing a re-render and with random keys the input loses focus because of a new element being rendered each time – Shubham Khatri Feb 02 '18 at 05:41
  • @subhamKhatri Ok To summarise my understanding. "with **defaultValue** you will make it an uncontrolled component because of which when we add new input tag it will not re render the entire list and add only new input tag to the existing list in case of constant Unique keys." – crazyCoder Feb 02 '18 at 08:57
  • @PushkalBoganatham yes – Shubham Khatri Feb 02 '18 at 09:03