[Fizz] Gracefully handle suspending in DOM configs (#26768)

E.g. if we suspend (throw a promise) in pushStartInstance today we might have already pushed some chunks (or even child segments potentially). We should revert back to where we were. This doesn't usually happen because when we suspend in a component it doesn't write anything itself, it'll always defer to som host instance to do the writing. There was a todo about this already but I'm not 100% sure it's always safe when suspending. It should be safe when suspending just regularly because it's just a noop. We might not even want "throwing a promise" in this mechanism to be supported longer term but for now that's how a suspend in internals.

Sebastian Markbåge committed May 3, 2023 at 18:13 UTC c10010a6a00911fe99452bc561dd47c3e15f4eb8

1 file changed +15 -1

packages/react-server/src/ReactFizzServer.js

+15 -1

@@ -1603,8 +1603,11 @@ function spawnNewSuspendedTask(

1603 // This is a non-destructive form of rendering a node. If it suspends it spawns

1604 // a new task and restores the context of this task to what it was before.

1605 function renderNode(request: Request, task: Task, node: ReactNodeList): void {

1606 - // TODO: Store segment.children.length here and reset it in case something

1606 + // Store how much we've pushed at this point so we can reset it in case something

1607 // suspended partially through writing something.

1608 + const segment = task.blockedSegment;

1609 + const childrenLength = segment.children.length;

1610 + const chunkLength = segment.chunks.length;

1611

1612 // Snapshot the current context in case something throws to interrupt the

1613 // process.

@@ -1620,6 +1623,10 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {

1623 } catch (thrownValue) {

1624 resetHooksState();

1625

1626 + // Reset the write pointers to where we started.

1627 + segment.children.length = childrenLength;

1628 + segment.chunks.length = chunkLength;

1629 +

1630 const x =

1631 thrownValue === SuspenseException

1632 ? // This is a special type of exception used for Suspense. For historical

@@ -1895,6 +1902,9 @@ function retryTask(request: Request, task: Task): void {

1902 prevTaskInDEV = currentTaskInDEV;

1903 currentTaskInDEV = task;

1904 }

1905 +

1906 + const childrenLength = segment.children.length;

1907 + const chunkLength = segment.chunks.length;

1908 try {

1909 // We call the destructive form that mutates this task. That way if something

1910 // suspends again, we can reuse the same task instead of spawning a new one.

@@ -1919,6 +1929,10 @@ function retryTask(request: Request, task: Task): void {

1929 } catch (thrownValue) {

1930 resetHooksState();

1931

1932 + // Reset the write pointers to where we started.

1933 + segment.children.length = childrenLength;

1934 + segment.chunks.length = chunkLength;

1935 +

1936 const x =

1937 thrownValue === SuspenseException

1938 ? // This is a special type of exception used for Suspense. For historical