{"files":[{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.internal.js"}],"patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex 1be03dfd27..0bf2484775 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -67,7 +67,7 @@ import shallowEqual from 'shared\/shallowEqual';\n import getComponentName from 'shared\/getComponentName';\n import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings';\n import {refineResolvedLazyComponent} from 'shared\/ReactLazyComponent';\n-import {REACT_LAZY_TYPE} from 'shared\/ReactSymbols';\n+import {REACT_LAZY_TYPE, getIteratorFn} from 'shared\/ReactSymbols';\n import warning from 'shared\/warning';\n import warningWithoutStack from 'shared\/warningWithoutStack';\n import {\n@@ -2094,6 +2094,72 @@ function validateTailOptions(\n }\n }\n \n+function validateSuspenseListNestedChild(childSlot: mixed, index: number) {\n+ if (__DEV__) {\n+ let isArray = Array.isArray(childSlot);\n+ let isIterable = !isArray && typeof getIteratorFn(childSlot) === 'function';\n+ if (isArray || isIterable) {\n+ let type = isArray ? 'array' : 'iterable';\n+ warning(\n+ false,\n+ 'A nested %s was passed to row #%s in . Wrap it in ' +\n+ 'an additional SuspenseList to configure its revealOrder: ' +\n+ ' ... ' +\n+ '{%s}<\/SuspenseList> ... ' +\n+ '<\/SuspenseList>',\n+ type,\n+ index,\n+ type,\n+ );\n+ return false;\n+ }\n+ }\n+ return true;\n+}\n+\n+function validateSuspenseListChildren(\n+ children: mixed,\n+ revealOrder: SuspenseListRevealOrder,\n+) {\n+ if (__DEV__) {\n+ if (\n+ (revealOrder === 'forwards' || revealOrder === 'backwards') &&\n+ (children !== undefined && children !== null && children !== false)\n+ ) {\n+ if (Array.isArray(children)) {\n+ for (let i = 0; i < children.length; i++) {\n+ if (!validateSuspenseListNestedChild(children[i], i)) {\n+ return;\n+ }\n+ }\n+ } else {\n+ let iteratorFn = getIteratorFn(children);\n+ if (typeof iteratorFn === 'function') {\n+ const childrenIterator = iteratorFn.call(children);\n+ if (childrenIterator) {\n+ let step = childrenIterator.next();\n+ let i = 0;\n+ for (; !step.done; step = childrenIterator.next()) {\n+ if (!validateSuspenseListNestedChild(step.value, i)) {\n+ return;\n+ }\n+ i++;\n+ }\n+ }\n+ } else {\n+ warning(\n+ false,\n+ 'A single row was passed to a . ' +\n+ 'This is not useful since it needs multiple rows. ' +\n+ 'Did you mean to pass multiple children or an array?',\n+ revealOrder,\n+ );\n+ }\n+ }\n+ }\n+ }\n+}\n+\n function initSuspenseListRenderState(\n workInProgress: Fiber,\n isBackwards: boolean,\n@@ -2142,6 +2208,7 @@ function updateSuspenseListComponent(\n \n validateRevealOrder(revealOrder);\n validateTailOptions(tailMode, revealOrder);\n+ validateSuspenseListChildren(newChildren, revealOrder);\n \n reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);\n \ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.internal.js\nindex 3f30ee0a1a..d8226c32e5 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.internal.js\n@@ -101,6 +101,85 @@ describe('ReactSuspenseList', () => {\n ]);\n });\n \n+ it('warns if a single element is passed to a \"forwards\" list', () => {\n+ function Foo({children}) {\n+ return {children}<\/SuspenseList>;\n+ }\n+\n+ ReactNoop.render();\n+ \/\/ No warning\n+ Scheduler.unstable_flushAll();\n+\n+ ReactNoop.render({null}<\/Foo>);\n+ \/\/ No warning\n+ Scheduler.unstable_flushAll();\n+\n+ ReactNoop.render({false}<\/Foo>);\n+ \/\/ No warning\n+ Scheduler.unstable_flushAll();\n+\n+ ReactNoop.render(\n+ \n+ Child<\/Suspense>\n+ <\/Foo>,\n+ );\n+\n+ expect(() => Scheduler.unstable_flushAll()).toWarnDev([\n+ 'Warning: A single row was passed to a . ' +\n+ 'This is not useful since it needs multiple rows. ' +\n+ 'Did you mean to pass multiple children or an array?' +\n+ '\\n in SuspenseList (at **)' +\n+ '\\n in Foo (at **)',\n+ ]);\n+ });\n+\n+ it('warns if a single fragment is passed to a \"backwards\" list', () => {\n+ function Foo() {\n+ return (\n+ \n+ {[]}<\/Fragment>\n+ <\/SuspenseList>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+\n+ expect(() => Scheduler.unstable_flushAll()).toWarnDev([\n+ 'Warning: A single row was passed to a . ' +\n+ 'This is not useful since it needs multiple rows. ' +\n+ 'Did you mean to pass multiple children or an array?' +\n+ '\\n in SuspenseList (at **)' +\n+ '\\n in Foo (at **)',\n+ ]);\n+ });\n+\n+ it('warns if a nested array is passed to a \"forwards\" list', () => {\n+ function Foo({items}) {\n+ return (\n+ \n+ {items.map(name => (\n+ \n+ {name}\n+ <\/Suspense>\n+ ))}\n+

Tail<\/div>\n+ <\/SuspenseList>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+\n+ expect(() => Scheduler.unstable_flushAll()).toWarnDev([\n+ 'Warning: A nested array was passed to row #0 in . ' +\n+ 'Wrap it in an additional SuspenseList to configure its revealOrder: ' +\n+ ' ... ' +\n+ '{array}<\/SuspenseList> ... ' +\n+ '<\/SuspenseList>' +\n+ '\\n in SuspenseList (at **)' +\n+ '\\n in Foo (at **)',\n+ ]);\n+ });\n+\n it('shows content independently by default', async () => {\n let A = createAsyncText('A');\n let B = createAsyncText('B');\n@@ -1162,7 +1241,8 @@ describe('ReactSuspenseList', () => {\n function Foo() {\n return (\n \n- Content<\/Suspense>\n+ A<\/Suspense>\n+ B<\/Suspense>\n <\/SuspenseList>\n );\n }\n","parents":["2073a7144e9982cc07cf7c19813e50b02c8bcd1b"],"commit":{"authorEmail":"sema@fb.com","subject":"Add warning when single item or nested arrays are used with SuspenseList (#16094)","revision":"48f6594474c449b3ed62fadedda0ffad5e3a807a","shortRevision":"48f6594474","authoredAt":"2019-07-10T11:07:28-07:00","authorName":"Sebastian Markbåge"},"body":""}

dillon1000/react

Files changed