Skip to content

Commit d9de84b

Browse files
committed
Clarify wording on keys in tutorial
1 parent 66a71c7 commit d9de84b

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

content/tutorial/tutorial.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1094,15 +1094,15 @@ In addition to the updated counts, a human reading this would probably say that
10941094
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
10951095
```
10961096

1097-
`key` is a special and reserved property in React (along with `ref`, a more advanced feature). When an element is created, React extracts the `key` property and stores the key directly on the returned element. Even though `key` may look like it belongs in `props`, `key` cannot be referenced using `this.props.key`. React automatically uses `key` to decide which components to update. A component cannot inquire about its `key`.
1097+
When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved. Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
10981098

1099-
When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that does not exist in the previous list, React creates a component. If the current list is missing a key that exists in the previous list, React destroys the previous component. If the keys match, the component is moved. Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
1099+
`key` is a special and reserved property in React (along with `ref`, a more advanced feature). When an element is created, React extracts the `key` property and stores the key directly on the returned element. Even though `key` may look like it belongs in `props`, `key` cannot be referenced using `this.props.key`. React automatically uses `key` to decide which components to update. A component cannot inquire about its `key`.
11001100

11011101
**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key, you may want to consider restructuring your data so that you do.
11021102

11031103
If no key is specified, React will present a warning and use the array index as a key by default. Using the array index as a key is problematic when trying to re-order a list's items or inserting/removing list items. Explicitly passing `key={i}` silences the warning but has the same problems as array indices and is not recommended in most cases.
11041104

1105-
Keys do not need to be globally unique. Keys only need to be unique between components and their siblings.
1105+
Keys do not need to be globally unique; they only need to be unique between components and their siblings.
11061106

11071107

11081108
### Implementing Time Travel

0 commit comments

Comments
 (0)