Skip to content

[Fizz] Gracefully handle suspending in DOM configs #26768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 3, 2023
Merged

[Fizz] Gracefully handle suspending in DOM configs #26768

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Gracefully handle suspending in DOM configs 
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.

There was a todo about this already but I'm not 100% sure it's always safe.
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.
  • Loading branch information
@sebmarkbage
sebmarkbage committed May 3, 2023
commit 804dced80ed104c8c9e9d44db9cfb8c760b38412
16 changes: 15 additions & 1 deletion packages/react-server/src/ReactFizzServer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1603,8 +1603,11 @@ function spawnNewSuspendedTask(
// This is a non-destructive form of rendering a node. If it suspends it spawns
// a new task and restores the context of this task to what it was before.
function renderNode(request: Request, task: Task, node: ReactNodeList): void {
// TODO: Store segment.children.length here and reset it in case something
// Store how much we've pushed at this point so we can reset it in case something
// suspended partially through writing something.
const segment = task.blockedSegment;
const childrenLength = segment.children.length;
const chunkLength = segment.chunks.length;

// Snapshot the current context in case something throws to interrupt the
// process.
Expand All @@ -1620,6 +1623,10 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
} catch (thrownValue) {
resetHooksState();

// Reset the write pointers to where we started.
segment.children.length = childrenLength;
segment.chunks.length = chunkLength;

const x =
thrownValue === SuspenseException
? // This is a special type of exception used for Suspense. For historical
Expand Down Expand Up @@ -1895,6 +1902,9 @@ function retryTask(request: Request, task: Task): void {
prevTaskInDEV = currentTaskInDEV;
currentTaskInDEV = task;
}

const childrenLength = segment.children.length;
const chunkLength = segment.chunks.length;
try {
// We call the destructive form that mutates this task. That way if something
// suspends again, we can reuse the same task instead of spawning a new one.
Expand All @@ -1919,6 +1929,10 @@ function retryTask(request: Request, task: Task): void {
} catch (thrownValue) {
resetHooksState();

// Reset the write pointers to where we started.
segment.children.length = childrenLength;
segment.chunks.length = chunkLength;

const x =
thrownValue === SuspenseException
? // This is a special type of exception used for Suspense. For historical
Expand Down