What is the significance of keys in ReactJS?

Question

I want to understand what happens if I don't use keys in dynamically added components. I removed keys and it renders without any issue and just gave warning messages regarding key usage. Would someone please give some example of what the consequences are if we don't use keys?

Answer 1

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

Example:

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>   <li key={number.toString()}>     {number}   </li> ); 

TL;DR Use unique and constant keys when rendering dynamic children, or expect strange things to happen.

One of the tricky aspects I've found during the few weeks I've been using React.js is to understand the key property you're expected to pass to a component when it's part of an array of children. It's not that you have to specify this property, things will work most of the time apart from getting this warning on the console:

Each child in an array should have a unique "key" prop. Check the render method of undefined. By reading the linked documentation it can be easy to not see the implications of this affirmation:

When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused). At first it looked to me it was all about performance but, as Paul O’Shannessy pointed, it's actually about identity.

The key here is to understand not everything in the DOM has a representation in React "Virtual DOM" and, because direct manipulations of the DOM (like a user changing an value or a jQuery plugin listening an element) are unnoticed by React, not using unique and constant keys will end up with React recreating the DOM node of a component when the key is not constant (and losing any untracked state in the node) or reusing a DOM node to render another component when the key is not unique (and tying its state to this other component).

Here you have a live demo showing how awful the results are:

http://jsfiddle.net/frosas/S4Dju/

Just add an item, change it, add more items and see what happens.

Also see

Source

Answer 2

Another useful usage of React keys other than creating dynamic elements is reseting elements when their keys change, for example in a project I had an <input/> element of type file and I wanted the element to be initialized to its initial value (no file chosen) each time the component renders, so I did the following:

Parent constructor:

this.state = {     fileInputKey: Date.now()     // other properties }; 

The state object also had other properties, I just added this one for the sake of this example

Each time I wanted the input element in the child component be reset I did:

this.setState({fileInputKey: Date.now()}); 

Parent render:

<Child fileInputKey={this.state.fileInputKey}/> 

Child render:

<input key={this.props.fileInputKey} type="file" onChange={this.onSelectFile}/> 

Also see this example from React blog: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key