Reword duplicate key warning (#10148)
* Reword duplicate key warning **what is the change?:** - Removes the now-inaccurate description of behavior around duplicate keys - Adds link to 'key' docs page - Changes tone to be more casual and friendly Alternative wording idea; 'Encountered two children with the same key, ${key} Child keys must be unique; using duplicate keys is not supported and will cause unexpected behavior in some versions of React. See https://fb.me/react-warning-keys for more information on how to fix this.' **why make this change?:** Mainly this change was needed because in React 16, duplicate keys will not cause omission of items with duplicate keys. All items will be rendered. It could happen that in future versions of React we will have different behavior though. **test plan:** `yarn test` **issue:** Wishlist item on https://github.com/facebook/react/issues/8854 * Further improve wording of duplicate key error **what is the change?:** Another tweak to the wording of this error to make it more clear and accurate. **why make this change?:** The previous tweak was too casual in tone and still not clear enough. **test plan:** `yarn test` and `REACT_DOM_JEST_USE_FIBER=1 yarn run test` **issue:** Wishlist item on https://github.com/facebook/react/issues/8854 * Run prettier * Fix typo in error message for duplicate keys **what is the change?:** Fixed a typo in the updated message * Fix two more typo spots
Flarnie Marchan committed
Jul 12, 2017 at 15:49 UTC
3b43f3190bbcc5d4cfe77dbc665e03b7b95d35b2
6 files changed
+48
-24
src/isomorphic/children/flattenChildren.js
+4
-2
@@ -38,8 +38,10 @@ function flattenSingleChildIntoContext(
38
warning(
39
false,
40
'flattenChildren(...): Encountered two children with the same key, ' +
41
- '`%s`. Child keys must be unique; when two children share a key, only ' +
42
- 'the first child will be used.%s',
41
+ '`%s`. Keys should be unique so that components maintain their ' +
42
+ 'identity across updates. Non-unique keys may cause children to ' +
43
+ 'be duplicated and/or omitted — the behavior is ' +
44
+ 'unsupported and could change in a future version.%s',
45
unescapeInDev(name),
46
ReactComponentTreeHook.getStackAddendumByID(selfDebugID),
47
);
src/renderers/__tests__/ReactChildReconciler-test.js
+18
-8
@@ -60,7 +60,10 @@ describe('ReactChildReconciler', () => {
60
61
expectDev(console.error.calls.count()).toBe(1);
62
expectDev(console.error.calls.argsFor(0)[0]).toContain(
63
- 'Child keys must be unique; when two children share a key, only the first child will be used.',
63
+ 'Keys should be unique so that components maintain their identity ' +
64
+ 'across updates. Non-unique keys may cause children to be ' +
65
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
66
+ 'could change in a future version.',
67
);
68
});
69
@@ -92,9 +95,11 @@ describe('ReactChildReconciler', () => {
95
normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
96
).toContain(
97
'Encountered two children with the same key, `1`. ' +
95
- 'Child keys must be unique; when two children share a key, ' +
96
- 'only the first child will be used.\n' +
97
- ' in div (at **)\n' +
98
+ 'Keys should be unique so that components maintain their identity ' +
99
+ 'across updates. Non-unique keys may cause children to be ' +
100
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
101
+ 'could change in a future version.',
102
+ ' in div (at **)\n' +
103
' in Component (at **)\n' +
104
' in Parent (at **)\n' +
105
' in GrandParent (at **)',
@@ -114,7 +119,10 @@ describe('ReactChildReconciler', () => {
119
120
expectDev(console.error.calls.count()).toBe(1);
121
expectDev(console.error.calls.argsFor(0)[0]).toContain(
117
- 'Child keys must be unique; when two children share a key, only the first child will be used.',
122
+ 'Keys should be unique so that components maintain their identity ' +
123
+ 'across updates. Non-unique keys may cause children to be ' +
124
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
125
+ 'could change in a future version.',
126
);
127
});
128
@@ -146,9 +154,11 @@ describe('ReactChildReconciler', () => {
154
normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
155
).toContain(
156
'Encountered two children with the same key, `1`. ' +
149
- 'Child keys must be unique; when two children share a key, ' +
150
- 'only the first child will be used.\n' +
151
- ' in div (at **)\n' +
157
+ 'Keys should be unique so that components maintain their identity ' +
158
+ 'across updates. Non-unique keys may cause children to be ' +
159
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
160
+ 'could change in a future version.',
161
+ ' in div (at **)\n' +
162
' in Component (at **)\n' +
163
' in Parent (at **)\n' +
164
' in GrandParent (at **)',
src/renderers/__tests__/ReactMultiChild-test.js
+10
-6
@@ -189,9 +189,11 @@ describe('ReactMultiChild', () => {
189
normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
190
).toContain(
191
'Encountered two children with the same key, `1`. ' +
192
- 'Child keys must be unique; when two children share a key, ' +
193
- 'only the first child will be used.\n' +
194
- ' in div (at **)\n' +
192
+ 'Keys should be unique so that components maintain their identity ' +
193
+ 'across updates. Non-unique keys may cause children to be ' +
194
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
195
+ 'could change in a future version.',
196
+ ' in div (at **)\n' +
197
' in WrapperComponent (at **)\n' +
198
' in div (at **)\n' +
199
' in Parent (at **)',
@@ -254,9 +256,11 @@ describe('ReactMultiChild', () => {
256
normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
257
).toContain(
258
'Encountered two children with the same key, `1`. ' +
257
- 'Child keys must be unique; when two children share a key, ' +
258
- 'only the first child will be used.\n' +
259
- ' in div (at **)\n' +
259
+ 'Keys should be unique so that components maintain their identity ' +
260
+ 'across updates. Non-unique keys may cause children to be ' +
261
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
262
+ 'could change in a future version.',
263
+ ' in div (at **)\n' +
264
' in WrapperComponent (at **)\n' +
265
' in div (at **)\n' +
266
' in Parent (at **)',
src/renderers/shared/fiber/ReactChildFiber.js
+5
-3
@@ -718,9 +718,11 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
718
}
719
warning(
720
false,
721
- 'Encountered two children with the same key, ' +
722
- '`%s`. Child keys must be unique; when two children share a key, ' +
723
- 'only the first child will be used.%s',
721
+ 'Encountered two children with the same key, `%s`. ' +
722
+ 'Keys should be unique so that components maintain their identity ' +
723
+ 'across updates. Non-unique keys may cause children to be ' +
724
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
725
+ 'could change in a future version.%s',
726
key,
727
getCurrentFiberStackAddendum(),
728
);
src/renderers/shared/stack/reconciler/ReactChildReconciler.js
+6
-3
@@ -46,9 +46,12 @@ function instantiateChild(childInstances, child, name, selfDebugID) {
46
if (!keyUnique) {
47
warning(
48
false,
49
- 'flattenChildren(...): Encountered two children with the same key, ' +
50
- '`%s`. Child keys must be unique; when two children share a key, only ' +
51
- 'the first child will be used.%s',
49
+ 'flattenChildren(...):' +
50
+ 'Encountered two children with the same key, `%s`. ' +
51
+ 'Keys should be unique so that components maintain their identity ' +
52
+ 'across updates. Non-unique keys may cause children to be ' +
53
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
54
+ 'could change in a future version.%s',
55
KeyEscapeUtils.unescapeInDev(name),
56
ReactComponentTreeHook.getStackAddendumByID(selfDebugID),
57
);
src/renderers/shared/stack/reconciler/flattenStackChildren.js
+5
-2
@@ -57,8 +57,11 @@ function flattenSingleChildIntoContext(
57
warning(
58
false,
59
'flattenChildren(...): Encountered two children with the same key, ' +
60
- '`%s`. Child keys must be unique; when two children share a key, only ' +
61
- 'the first child will be used.%s',
60
+ '`%s`. ' +
61
+ 'Keys should be unique so that components maintain their identity ' +
62
+ 'across updates. Non-unique keys may cause children to be ' +
63
+ 'duplicated and/or omitted — the behavior is unsupported and ' +
64
+ 'could change in a future version.%s',
65
KeyEscapeUtils.unescapeInDev(name),
66
ReactComponentTreeHook.getStackAddendumByID(selfDebugID),
67
);