Stats

33 Contributors: 1 Sunday, April 9, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial: riptutorial@gmail.com
Roadmap: roadmap

How and why to use keys in React

Introduction

Whenever you are rendering a list of React components, each component needs to have a key attribute. The key can be any value, but it does need to be unique to that list.

When React has to render changes on a list of items, React just iterates over both lists of children at the same time and generates a mutation whenever there's a difference. If there are no keys set for the children, React scans each child. Otherwise, React compares the keys to know which were added or removed from the list

Remarks

For more information, visit this link to read how to use keys: https://facebook.github.io/react/docs/lists-and-keys.html

And visit this link to read why it is recommended to use keys: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children

Related Examples