{"commit":{"authorEmail":"dan.abramov@gmail.com","authoredAt":"2019-04-05T00:29:47+01:00","subject":"Fix Suspense fragment edge cases","shortRevision":"9bcd5b2576","revision":"9bcd5b25761f63755ca98575ee0107e1defbeb97","authorName":"Dan"},"parents":["387ad54d804a5ca34c2514770e6f04b933a3c414"],"patch":"diff --git a\/shells\/dev\/app\/SuspenseTree\/index.js b\/shells\/dev\/app\/SuspenseTree\/index.js\nnew file mode 100644\nindex 0000000000..fb4ca80de6\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/SuspenseTree\/index.js\n@@ -0,0 +1,64 @@\n+\/\/ @flow\n+\n+import React, { Suspense, useState } from 'react';\n+\n+function SuspenseTree() {\n+ return (\n+ <>\n+

Suspense<\/h1>\n+ Loading outer<\/Fallback>}>\n+ \n+ <\/Suspense>\n+ <\/>\n+ );\n+}\n+\n+function Parent() {\n+ return (\n+
\n+ Loading inner 1<\/Fallback>}>\n+ Hello<\/Child>\n+ <\/Suspense>\n+ Loading inner 2<\/Fallback>}>\n+ World<\/Child>\n+ <\/Suspense>\n+ This will never load<\/Fallback>}>\n+ \n+ <\/Suspense>\n+ \n+ <\/div>\n+ );\n+}\n+\n+function LoadLater() {\n+ const [loadChild, setLoadChild] = useState(0);\n+ return (\n+ setLoadChild(true)}>Click to load<\/Fallback>\n+ }\n+ >\n+ {loadChild ? (\n+ setLoadChild(false)}>\n+ Loaded! Click to suspend again.\n+ <\/Child>\n+ ) : (\n+ \n+ )}\n+ <\/Suspense>\n+ );\n+}\n+\n+function Child(props) {\n+ return
;\n+}\n+\n+function Fallback(props) {\n+ return
{props.children}<\/h3>;\n+}\n+\n+function Never() {\n+ throw new Promise(resolve => {});\n+}\n+\n+export default SuspenseTree;\ndiff --git a\/shells\/dev\/app\/index.js b\/shells\/dev\/app\/index.js\nindex 4857c0c2cf..3a76db783f 100644\n--- a\/shells\/dev\/app\/index.js\n+++ b\/shells\/dev\/app\/index.js\n@@ -11,6 +11,7 @@ import InspectableElements from '.\/InspectableElements';\n import InteractionTracing from '.\/InteractionTracing';\n import ToDoList from '.\/ToDoList';\n import Toggle from '.\/Toggle';\n+import SuspenseTree from '.\/SuspenseTree';\n \n import '.\/styles.css';\n \n@@ -33,6 +34,7 @@ function mountTestApp() {\n mountHelper(ElementTypes);\n mountHelper(EditableProps);\n mountHelper(Toggle);\n+ mountHelper(SuspenseTree);\n mountHelper(DeeplyNestedComponents);\n }\n \ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex cf0b973e68..099e0b3743 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -716,6 +716,16 @@ export function attach(\n function enqueueUnmount(fiber) {\n const isRoot = fiber.tag === HostRoot;\n const primaryFiber = getPrimaryFiber(fiber);\n+ if (!fiberToIDMap.has(primaryFiber)) {\n+ \/\/ If we've never seen this Fiber, it might be because\n+ \/\/ it is inside a non-current Suspense fragment tree,\n+ \/\/ and so the store is not even aware of it.\n+ \/\/ In that case we can just ignore it, or otherwise\n+ \/\/ there will be errors later on.\n+ primaryFibers.delete(primaryFiber);\n+ \/\/ TODO: this is fragile and can obscure actual bugs.\n+ return;\n+ }\n const id = getFiberID(primaryFiber);\n if (isRoot) {\n const operation = new Uint32Array(2);\n@@ -757,8 +767,24 @@ export function attach(\n enqueueMount(fiber, parentFiber);\n }\n \n- if (fiber.child !== null) {\n- mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber, true);\n+ const isTimedOutSuspense =\n+ fiber.tag === ReactTypeOfWork.SuspenseComponent &&\n+ fiber.memoizedState !== null;\n+\n+ if (isTimedOutSuspense) {\n+ \/\/ Special case: if Suspense mounts in a timed-out state,\n+ \/\/ get the fallback child from the inner fragment and mount\n+ \/\/ it as if it was our own child. Updates handle this too.\n+ const primaryChildFragment = fiber.child;\n+ const fallbackChildFragment = primaryChildFragment.sibling;\n+ const fallbackChild = fallbackChildFragment.child;\n+ if (fallbackChild !== null) {\n+ mountFiber(fallbackChild, shouldEnqueueMount ? fiber : parentFiber, true);\n+ }\n+ } else {\n+ if (fiber.child !== null) {\n+ mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber, true);\n+ }\n }\n \n if (traverseSiblings && fiber.sibling !== null) {\n","files":[{"path":"shells\/dev\/app\/SuspenseTree\/index.js","status":"A"},{"path":"shells\/dev\/app\/index.js","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"}],"body":""}

dillon1000/react

Files changed