diff --git a/src/isomorphic/children/flattenChildren.js b/src/isomorphic/children/flattenChildren.js index fa8ea58d74606..bbed350087bab 100644 --- a/src/isomorphic/children/flattenChildren.js +++ b/src/isomorphic/children/flattenChildren.js @@ -38,8 +38,10 @@ function flattenSingleChildIntoContext( warning( false, 'flattenChildren(...): Encountered two children with the same key, ' + - '`%s`. Child keys must be unique; when two children share a key, only ' + - 'the first child will be used.%s', + '`%s`. Keys should be unique so that components maintain their ' + + 'identity across updates. Non-unique keys may cause children to ' + + 'be duplicated and/or omitted — the behavior is ' + + 'unsupported and could change in a future version.%s', unescapeInDev(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID), ); diff --git a/src/renderers/__tests__/ReactChildReconciler-test.js b/src/renderers/__tests__/ReactChildReconciler-test.js index 4ad42d83457ce..13826f03989da 100644 --- a/src/renderers/__tests__/ReactChildReconciler-test.js +++ b/src/renderers/__tests__/ReactChildReconciler-test.js @@ -60,7 +60,10 @@ describe('ReactChildReconciler', () => { expectDev(console.error.calls.count()).toBe(1); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Child keys must be unique; when two children share a key, only the first child will be used.', + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.', ); }); @@ -92,9 +95,11 @@ describe('ReactChildReconciler', () => { normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]), ).toContain( 'Encountered two children with the same key, `1`. ' + - 'Child keys must be unique; when two children share a key, ' + - 'only the first child will be used.\n' + - ' in div (at **)\n' + + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.', + ' in div (at **)\n' + ' in Component (at **)\n' + ' in Parent (at **)\n' + ' in GrandParent (at **)', @@ -114,7 +119,10 @@ describe('ReactChildReconciler', () => { expectDev(console.error.calls.count()).toBe(1); expectDev(console.error.calls.argsFor(0)[0]).toContain( - 'Child keys must be unique; when two children share a key, only the first child will be used.', + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.', ); }); @@ -146,9 +154,11 @@ describe('ReactChildReconciler', () => { normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]), ).toContain( 'Encountered two children with the same key, `1`. ' + - 'Child keys must be unique; when two children share a key, ' + - 'only the first child will be used.\n' + - ' in div (at **)\n' + + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.', + ' in div (at **)\n' + ' in Component (at **)\n' + ' in Parent (at **)\n' + ' in GrandParent (at **)', diff --git a/src/renderers/__tests__/ReactMultiChild-test.js b/src/renderers/__tests__/ReactMultiChild-test.js index f8262f8b8a167..cdf104ba3b3a0 100644 --- a/src/renderers/__tests__/ReactMultiChild-test.js +++ b/src/renderers/__tests__/ReactMultiChild-test.js @@ -189,9 +189,11 @@ describe('ReactMultiChild', () => { normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]), ).toContain( 'Encountered two children with the same key, `1`. ' + - 'Child keys must be unique; when two children share a key, ' + - 'only the first child will be used.\n' + - ' in div (at **)\n' + + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.', + ' in div (at **)\n' + ' in WrapperComponent (at **)\n' + ' in div (at **)\n' + ' in Parent (at **)', @@ -254,9 +256,11 @@ describe('ReactMultiChild', () => { normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]), ).toContain( 'Encountered two children with the same key, `1`. ' + - 'Child keys must be unique; when two children share a key, ' + - 'only the first child will be used.\n' + - ' in div (at **)\n' + + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.', + ' in div (at **)\n' + ' in WrapperComponent (at **)\n' + ' in div (at **)\n' + ' in Parent (at **)', diff --git a/src/renderers/shared/fiber/ReactChildFiber.js b/src/renderers/shared/fiber/ReactChildFiber.js index d918261264c9e..f5f46616197a2 100644 --- a/src/renderers/shared/fiber/ReactChildFiber.js +++ b/src/renderers/shared/fiber/ReactChildFiber.js @@ -718,9 +718,11 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) { } warning( false, - 'Encountered two children with the same key, ' + - '`%s`. Child keys must be unique; when two children share a key, ' + - 'only the first child will be used.%s', + 'Encountered two children with the same key, `%s`. ' + + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.%s', key, getCurrentFiberStackAddendum(), ); diff --git a/src/renderers/shared/stack/reconciler/ReactChildReconciler.js b/src/renderers/shared/stack/reconciler/ReactChildReconciler.js index c43f8cd201478..b15503d5788ad 100644 --- a/src/renderers/shared/stack/reconciler/ReactChildReconciler.js +++ b/src/renderers/shared/stack/reconciler/ReactChildReconciler.js @@ -46,9 +46,12 @@ function instantiateChild(childInstances, child, name, selfDebugID) { if (!keyUnique) { warning( false, - 'flattenChildren(...): Encountered two children with the same key, ' + - '`%s`. Child keys must be unique; when two children share a key, only ' + - 'the first child will be used.%s', + 'flattenChildren(...):' + + 'Encountered two children with the same key, `%s`. ' + + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.%s', KeyEscapeUtils.unescapeInDev(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID), ); diff --git a/src/renderers/shared/stack/reconciler/flattenStackChildren.js b/src/renderers/shared/stack/reconciler/flattenStackChildren.js index da0f50df913cd..295bc25e3903d 100644 --- a/src/renderers/shared/stack/reconciler/flattenStackChildren.js +++ b/src/renderers/shared/stack/reconciler/flattenStackChildren.js @@ -57,8 +57,11 @@ function flattenSingleChildIntoContext( warning( false, 'flattenChildren(...): Encountered two children with the same key, ' + - '`%s`. Child keys must be unique; when two children share a key, only ' + - 'the first child will be used.%s', + '`%s`. ' + + 'Keys should be unique so that components maintain their identity ' + + 'across updates. Non-unique keys may cause children to be ' + + 'duplicated and/or omitted — the behavior is unsupported and ' + + 'could change in a future version.%s', KeyEscapeUtils.unescapeInDev(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID), );